@Watch未触发

DS_web_developer

所以我的hiearchy设置成这样

根

应用程式
- 时间线项目
  - 时间轴元数据

哪里

在挂载的app.vue中，我执行一些http请求，并在获取和处理数据时填充时间轴var

<template>
  <div id="app">
    <div class="loading" v-show="loading">Loading ...</div>
    <table class="timeline">
        <TimelineItem v-for="event in timeline" :key="event.id" :item="event" :players="players" :match="match"></TimelineItem>
    </table>
  </div>
</template>


export default class App extends Vue {
  ... 

  public timeline: any[] = [];

  public mounted() {
    ...
    if (!!this.matchId) {
      this._getMatchData();
    } else {
      console.error('MatchId is not defined.  ?matchId=....');
    }
  }

  private _getMatchData() {
    axios.get(process.env.VUE_APP_API + 'match-timeline-events?filter=' + JSON.stringify(params))
      .then((response) => {
        this.loading = false;
        this.timeline = [];
        this.timeline = response.data;
  }

...
}

然后在我的TimelineItem中，我有这个：

<template>
  <tr>
    <td class="time">
      ...
      <TimelineItemMetadata :item="item" :match="match"></TimelineItemMetadata>

    </td>
  </tr>
</template>

....

@Component({
  components: {
    ...
  },
})
export default class TimelineItem extends Vue {
  @Prop() item: any;
  @Prop() match: any;
  @Prop() players: any;
}
</script>

然后，在我的TimelineItemMetadata中：

<template>
  <div>
    TEST1
    {{item}}
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({})
export default class TimelineItemMetadata extends Vue {

  @Prop() item: any;
  @Prop() match: any;


  @Watch('match') onMatchChanged() {
    console.log('TEST');
  }
  @Watch('item') onItemChanged() {
    console.log('ITEM', this.item);
  }

  public mounted() {
    console.log('timeline metadata item component loaded');
  }

}
</script>

该项目和匹配@Watch是不是得到触发，但与Vue公司-devtools它说，有数据......它打印出...那么，为什么我的@Watch不会被触发？

谢尔盖

在您的例子，似乎match与item该道具的TimelineItemMetadata属性不会随时间而改变：他们只是通过设置App组件，当它被安装。

正如我在这里阅读的那样，您似乎需要将一个显式immediate参数传递给观察者，以使其在道具第一次更改时触发。。

因此，我想您应该这样做：

// note typo is fixed
@Watch('match', {immediate: true}) onMatchChanged() {
  console.log('TEST');
}
@Watch('item', {immediate: true})) onItemChanged() {
  console.log('ITEM', this.item);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。