Vue. js значение реквизита в дочернем компоненте не обновляется при изменении значения в root компоненте - PullRequest
Новая
       75

Vue. js значение реквизита в дочернем компоненте не обновляется при изменении значения в root компоненте

1 голос
/ 12 апреля 2020

Я уже получаю реквизиты от моего root компонента. В соответствии с <template>, который я тестирую, {{firstdata}} обновляется, когда значение в компоненте root изменяется, но {{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>

Вот так я получаю значение обновления от parent (первые упомянутые мной данные 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>

Ответы [ 3 ]

0 голосов
/ 12 апреля 2020

используйте его в computed: 

computed: {
  topic() {
    return this.firstdata
  }
}
0 голосов
/ 12 апреля 2020

использовать свойство watch: 

watch: {
firstdata:function(value){
   this.topic = value
}
}
0 голосов
/ 12 апреля 2020

Это верно, поскольку функция data запускается только один раз, topic назначается только один раз. Если вы хотите постоянно просматривать и обновлять значение, используйте вычисленное: 

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

и удалите topic из данных.

Но в этом нет необходимости, поскольку вы можете просто использовать firstdata непосредственно в компоненте, как вы это сделали при установке topic.

...