1

我已经从我的根组件收到了道具。通过<template>我测试，{{firstdata}}当根组件中的值发生变化时，它会更新，但{{topic}}它仍然与它获得的第一个值相同。似乎this.firstdata只存储一次数据而无需进一步更新。

我这样做是 return {topic: this.firstdata因为我需要topic在我的 java 脚本中使用，因为我不能直接调用{{firstdata}}javascript 部分。有什么解决方案可以为我更新反应性topic吗？

    <template>

        {{firstdata}}
        {{ this.topic }}

    </template>

<script>
   export default {
   props: ["firstdata", "seconddata"],

          data() {
            return {
              topic: this.firstdata
            };
          },
    </script>

这就是我从父级获取更新值的方式（我提到的第一个数据是 breedKey）

        <b-button v-on:click="currentBreed = 0" >  {{ breeds[0].name }}  </b-button>
        <b-button v-on:click="currentBreed = 1" >  {{ breeds[1].name }}  </b-button>

        <ChildCompo v-bind:breedKey="breedKey" v-bind:time="time"> </ChildCompo>

<script>

     data() {
        const vm = this;
        return {
          currentBreed: 0,
          time:[],
          breeds: [
            { name: "" , key: "" }, // Initially empty values
            { name: "" , key: "" }, // Initially empty values
            { name: "" , key: "" }, // Initially empty values
          ]
        }
      },

      async created() {
        try {
          this.promise = axios.get(
            "https://www.mustavi.com/Trends/"
          );
          const res = await this.promise;
          this.topic0 = res.data.data[0].Trends;
          this.topic1 = res.data.data[1].Trends;
          this.topic2 = res.data.data[2].Trends;

          this.breeds[0].name = this.breeds[0].key = this.topic0;
          this.breeds[1].name = this.breeds[1].key = this.topic1;
          this.breeds[2].name = this.breeds[2].key = this.topic2;

          this.time = res.data.data[0].DT;

              } catch (e) {
             console.error(e);
                }  
            },

      computed: {
            breedKey() {
              return this.breeds[this.currentBreed].key;
            }
          },

        </script>
4

3 回答 3

0

没错，因为data函数只运行一次，topic只分配一次。如果您想持续观察和更新该值，请使用计算：

computed: {
  topic() {
    return this.firstdata;
  }
}

并topic从数据中删除。

但是没有必要这样做，因为您可以firstdata像设置时一样直接在组件中使用topic.

于 2020-04-12T17:11:13.907 回答
0

使用它computed：

computed: {
  topic() {
    return this.firstdata
  }
}
于 2020-04-12T17:11:27.947 回答
0

使用手表属性：

watch: {
firstdata:function(value){
   this.topic = value
}
}
于 2020-04-12T19:32:48.587 回答