Typescript @手表未触发

所以我的教区是这样设置的

根

• 应用程序
  • 时间项目
    • 时间线元数据

在哪里

在app.vue中 在挂载时，我执行一些http请求，在获取和处理数据时，我填充一个时间线变量

<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;
  }

...
}

加载。。。
导出默认类应用程序扩展Vue{
... 
公共时间线：任意[]=[]；
公众乘车（）{
...
如果（！！this.matchId）{
这是。_getMatchData（）；
}否则{
console.error（'MatchId未定义。？MatchId=…'）；
}
}
private_getMatchData（）{
get（process.env.VUE_APP_API+'match timeline events？filter='+JSON.stringify（params））
。然后（（响应）=>{
这一点：加载=错误；
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>

...
....
@组成部分({
组成部分：{
...
},
})
导出默认类TimelineItem扩展Vue{
@道具（）项目：任何；
@Prop（）匹配：任意；
@道具（）玩家：任何；
}

然后，在我的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>

测试1
{{item}}
从“Vue属性装饰器”导入{Component，Vue，Prop，Watch}；
@组件（{}）
导出默认类TimelineItemMetadata扩展Vue{
@道具（）项目：任何；
@Prop（）匹配：任意；
@在MatchChanged（）上观看（'match'））{
console.log（'TEST'）；
}
@监视（‘项目’）已更改（）{
console.log（'ITEM'，this.ITEM）；
}
公众乘车（）{
log（'加载了时间轴元数据项组件'）；
}
}

---

项目和匹配@Watch未被触发，但使用Vue devtools，它表示有数据…并打印出来…那么为什么我的@Watch未被触发？

在您的示例中，

TimelineItemMetadata

属性的

匹配
和
项目
道具似乎不会随着时间的推移而改变e:它们只是在安装时由
App
组件设置的

，似乎您需要将显式的
立即
参数传递给观察者，以便在道具第一次更改时触发它。

所以，我想你应该：

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

可能只是复制/粘贴的问题，但是在
TimelineItem
中，您没有在
@Component
组件选项中设置
TimelineItemMetada
。此外，在
TimelineItemMetadata
中，有一个打字错误定义了
onMathcChanged
函数（这应该与您的问题无关）是的，我包括了所有的组件，因此TimelineItemMetadata正在显示和显示{{item}}….只是@Watch没有触发…谢谢你的错误提示…但是是的，它是不相关的，没有解决问题：/已经在这上面几个小时了…无法解决它：'（哦，是的！它起作用了…就像一个符咒…非常感谢！你是一个救生员！！！！