Блог

Главная - Вопросы по программированию - Данные исчезают в следующей строке

Данные исчезают в следующей строке

#javascript #vue.js

#javascript #vue.js

Вопрос:

Может кто-нибудь, пожалуйста, объясните мне, что произошло в этих кодах и как я могу это решить?

Я получаю данные в родительской mounted функции и обновляю ее данные. Итак, у меня есть новый объект в дочернем элементе. Но значение свойства этого объекта пустое!

Родительский:

 <template>
    <div class="main-page">
        <main-content v-bind:config="mainContentConfig" />
    </div>
</template>
mounted(){
    fetchData().then(editions => { editions.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
        this.mainContentConfig.intranetEditions = [...editions];
        this.mainContentConfig.currentMenuIndex = 1;
    });
}

Дочерний:

 mounted(){
    console.log("AA==============>", this.config);
    console.log("BB==============>", this.config.intranetEditions);
}

Но на консоли у меня есть:

введите описание изображения здесь

Я обнаружил эту проблему, когда я заполняю другие данные в дочернем классе this.config.intranetEditions массивом, который всегда пуст!

Редактировать: я тоже пробовал этот код, но никакой разницы!

 [...this.config.intranetEditions]

Редактировать 2 Этот код тоже тестировался, но ничего!

 console.log("AA==============>", this.config);
console.log("BB==============>", JSON.stringify(this.config.intranetEditions));

Комментарии:

1. консольные журналы объектов / массивов могут вводить в заблуждение — попробуйте console.log("AA==============>", JSON.stringify(this.config)); и аналогично для следующей строки

2. какая у вас версия vue? попробуйте прочитать это: vuejs.org/v2/api/#Vue-nextTick Я думаю, это решило бы вашу проблему с реактивностью

Ответ №1:

Дочерний компонент смонтирован, но родительская выборка еще не завершена, поэтому this.config наблюдатель остается наблюдателем до тех пор, пока выборка не будет выполнена (поэтому then запускается) и выполняется var.

Можете ли вы попробовать посмотреть prop config в дочернем компоненте? затем вы увидите, когда this.config это будет выполнено.

https://v2.vuejs.org/v2/guide/computed.html#Watchers

ОБНОВЛЕНИЕ С ПРИМЕРОМ:

дочерний компонент

 watch: {
  config(newValue) {
    console.log("AA==============>", newValue.intranetEditions);
    checkConfigValue();
  },
},

methods: {
  checkConfigValue() {
    console.log("BB==============>", this.config.intranetEditions);
  };
},

Таким образом, вы можете что-то сделать в наблюдателе с newValue помощью, или запустить метод и использовать this.config . В этом случае обе консоли будут печатать одно и то же.