Question

所以我的课长是这样设置的

根

应用
- 时间轴项
  - 时间轴元数据

其中

在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没有触发？

Answer 1

在您的示例中，match属性的item和TimelineItemMetadata道具似乎不会随时间变化：它们仅由App组件设置它被安装了。

As I read here，您似乎需要将一个明确的immediate参数传递给观察者，以使其道具第一次更改时触发。。

所以，我想你应该这样做：

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

@Watch未触发

1 个答案: