Vue.JS не обновляет данные во вложенный компонент

Question

Я работаю с 3 вложенными компонентами VUE (основной, родительский и дочерний), и у меня возникают проблемы при передаче данных.

Основной компонент использует простые данные API на основе запроса ввода: результат используется для получения другой информации в другом компоненте.

Например, первый API возвращает регион «DE», первый компонент заполняется, затем попробуйте получить «рецепты» из области «DE», но что-то идет не так: комментарии отладки в consolle находятся в неправильном порядке, а используемая переменная результаты пустые во втором запросе (шаг 3):

  app.js:2878 Step_1: DE 
  app.js:3114 Step_3:  0
  app.js:2890 Step_2: DE

Это родительский (включенный в основной компонент) код:

родительский шаблон :

<template>
   <div>
       <recipes :region="region"/>
   </div>
</template>

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

 data: function () {
        return {
            region: null,
        }
    },

 beforeRouteEnter(to, from, next) {

        getData(to.params.e_title, (err, data) => {

             console.log("Step_1: "+data.region); // return  Step_1: DE

             // here I ned to update the region value to "DE"

            next(vm => vm.setRegionData(err, data));
        });
    },

    methods: {
        setRegionData(err, data) {
            if (err) {
                this.error = err.toString();
            } else {
                console.log("Step_2: " + data.region); // return DE
                this.region = data.region;

            }
        }
    },

дочерний шаблон :

<template>
     <div v-if="recipes" class="content">
      <div class="row">
            <recipe-comp v-for="(recipe, index) in recipes" :key="index" :title="recipe.title" :vote="recipe.votes">
    </recipe-comp>
        </div>
       </div>
     </template>

дочерний код :

props: ['region'],
....
 beforeMount () {
        console.log("Step_3 "+this.region); // Return null!!
        this.fetchData()
    },

Проблема должна быть в родительском beforeRouteEnter hook, я думаю.

Важные замечания по отладке:

1) Похоже, что дочерний код работает правильно, потому что если я заменю значение по умолчанию в родительских данных на 'IT' вместо null , дочерний компонент вернет правильные рецепты из Второй запрос API. Это подтверждает, что данные по умолчанию обновляются слишком поздно, а не тогда, когда они получили результаты первого запроса API.

data: function () {
    return {
        region: 'IT',
    }
},

2) Если я использую {{region}} в дочернем шаблоне, он показывает правильные (и обновленные) данные: 'DE'!

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

Answer 1

Вместо использования хука beforeMount внутри дочернего компонента, вы сможете выполнить это с помощью свойства watch.Я полагаю, что это происходит потому, что хук beforeMount срабатывает до того, как родитель сможет установить это свойство.

---

• Подробнее о жизненном цикле Vue можно узнать здесь
• Подробнее о хуке жизненного цикла beforeMount можно найти здесь

---

Короче, вы можете попробовать изменить это:

props: ['region'],
....
 beforeMount () {
    console.log("Step_3 "+this.region); // Return null!!
    this.fetchData()
},

Примерно так:

props: ['region'],
....
 watch: {
    region() {
        console.log("Step_3 "+this.region); // Return null!!
        this.fetchData()
    }
},

Приветствия !!