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

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

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

例如，第一个API返回regione“DE”，填充第一个组件，然后尝试从区域“DE”获取“recipes”，但出现了一些错误：控制台中的调试注释顺序不正确，使用的变量在第二个请求中结果为空（步骤3）：

这是父级（包含在主组件中）代码：

父模板：

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

子模板：

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

我认为，这个问题应该在路由之前进入父级

重要的调试注意事项：

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

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

2）如果我在子模板中使用{region}，它会显示正确（并且更新）的数据：“DE”

---

我需要新的眼睛来修理它。您能帮助我吗？

您应该能够使用

watch

属性来完成此操作，而不是在子组件内部使用

beforeMount

钩子。我认为这是因为

beforeMount

钩子是在父级能够设置该属性之前触发的

---

---

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

类似于这样的内容：

---

干杯

您可以对该道具使用

watch

，而不是

beforeMount

。。？当该道具更改时，它将触发

this.fetchData

？老实说，我需要看更多的代码才能完全掌握逻辑。。。这感觉像是一个后勤问题。是的，我认为这也是一个逻辑问题。我更新了问题的更多细节：基本上第一步是从用户输入中获取ID，并运行第一个API请求，返回用户数据（区域）。第二个组件应该将区域传递给第二个API请求以获取配方，但是。。。有点问题（请参阅我文章中的第一个代码控制台日志块）。A传递的值尚未更新。是！谢谢观看“区域”：“fetchData”功能完美！我非常接近，我测试了“this.region”，但我只能使用“region”。再次感谢您抽出时间！完全地再次感谢马特的帮助！我是Vue.js的初学者，使用坏手表让我抓狂。当你发布你的答案时，我会提交它，我会删除我自己的答案。谢谢，非常感谢！正如你所建议的，我使用了watch的快捷方式：watch:{'region'：'fetchData'}，现在组件和子组件是同步的！是 啊