当根组件中的值更改时，子组件中的 Vue.js props 值不会更新答案

【问题标题】：Vue.js props value in the child component is not update when the value in root component is change当根组件中的值更改时，子组件中的 Vue.js props 值不会更新
【发布时间】：2020-07-25 06:13:06
【问题描述】：

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

我使用return {topic: this.firstdata 是因为我需要在我的java 脚本中使用topic，因为我不能在javascript 部分直接调用{{firstdata}}。有什么解决方案可以为我提供反应性更新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>

【问题讨论】：

不明白你所说的“因为我不能在javascript部分直接调用{{ firstdata }}。”？
为什么不能在组件中使用firstdata？您在设置topic 时确实使用了它，并且您可以在任何需要的地方继续以相同的方式使用它。
您能否在此处查看我的代码jsfiddle.net/L205bt84 在我的 PC 中，子组件中第 35 行的search_params.set('param1', this.topic); 可以工作，但它仍然是它获得的第一个值，不知道为什么在浏览器中它甚至无法获得第一个值，如果您尝试将 this.topic 更改为 'China' 您将看到 API 工作正常

标签： javascript vue.js vuejs2 vue-component vue-props

【解决方案1】：

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

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

并从数据中删除topic。

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

【讨论】：

好的，现在 {{topic}} 可以在模板中更新，但可能主要问题仍然相同。当我在脚本部分使用 this.topic 时。 this.topic 仍然是第一个没有更新的值。
<main-chart-example v-bind:breedKey="breedKey" ，breedKey 是我的意思的第一个数据
computed: { breedKey() { return this.breeds[this.currentBreed].key; } } 在 parent 中，我通过这个计算方法得到了breedKey的更新值，然后我通过v-bind发送了这个值
您能否编辑您的问题以显示您问题中的所有相关代码，包括breeds 数据？您显示的代码应该可以工作，因此firstdata 可能没有正确更改或数据不是唯一的。
这很好，但如果可以的话，也显示 2 或 3 个 breeds 项目

【解决方案2】：

在computed中使用它：

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

【讨论】：

【解决方案3】：

使用监视属性：

watch: {
firstdata:function(value){
   this.topic = value
}
}

【讨论】：