Vue.JS 不会将数据更新到嵌套组件中

Question

我正在使用 3 个 VUE 嵌套组件（主组件、父组件和子组件），但在传递数据时遇到问题。

主组件根据输入请求获取简单的API数据：结果用于获取其他组件中的其他信息。

例如，第一个 API 返回区域“DE”，填充第一个组件，然后尝试从区域“DE”获取“食谱”，但出现问题：控制台中的调试 cmets 顺序错误并且使用的变量在第二个请求中结果为空（第 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 钩子。

重要调试说明：

1) 看起来子代码工作正常，因为如果我将父数据中的默认值替换为“IT”而不是 null，子组件将返回正确的来自第二个 API 请求的食谱。这确认默认数据更新得太晚，而不是在第一次 API 请求得到结果时更新。

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

2)如果我在子模板中使用 {{region}}，它会显示正确（和更新的）数据：'DE'！

我需要新鲜的眼睛来修复它。你能帮帮我吗？

Answer 1

您应该能够使用watch 属性来完成此操作，而不是在子组件内部使用beforeMount 挂钩。我相信这是因为 beforeMount 钩子在父级能够设置该属性之前被触发。

---

• More on the Vue lifecycle can be found here
• More on the beforeMount lifecycle hook can be found here

---

简而言之，您可以尝试更改此设置：

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()
    }
},

干杯！！