Question

我正在使用3个VUE嵌套组件（主组件，父组件和子组件），并且在传递数据时遇到麻烦。

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

例如，第一个API返回区域“ DE”，然后填充第一个组件，然后尝试从区域“ DE”获取“食谱”，但是出了点问题：控制台中的调试注释顺序错误，使用了变量在第二个请求（步骤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

您应该能够使用beforeMount属性来完成此操作，而不是使用子组件内部的watch钩子。我相信这是因为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()
    }
},

干杯！

Vue.JS无法将数据更新到嵌套组件中

1 个答案: