Vuejs-在父级中的Ajax请求后，在子级中分配prop值。

Question

我确定我在这里缺少一些简单的东西。我创建了一个可重用的子组件，其中包括如下所示的输入，并且我将从父级传递给它initialValue的itemValueprop中分配数据对象中的in 。

<template>
    <label>{{itemLabel}}</label>
    <input  v-model="initialValue"  type="text" >
</template>
<script>
export default {

    props: ['itemValue'],

    data(){
         return {
               initialValue: this.itemValue,
         }
    }
</script>

如果在父组件中，我item-value直接使用字符串分配属性，则效果很好。

问题是我想item-value在父对象中进行ajax调用后设置，因此我将其绑定到由使用以下方法设置的数据对象属性beforeMount()

<v-child-component :item-value="theValue"></v-child-component>

和...

data(){
   return {
      theValue: null,
   }
},
methods: {
   setvalue(){
       //make ajax axios get request here then set this.theValue
   }
}
beforeMount(){
    this.setValue();
}

当我这样做时，似乎孩子的item-value已绑定到nullajax调用完成并设置实际值之前的值。我如何在这里达到目的？

Answer 1

如果您不希望组件在theValue设置之前渲染，请使用v-if指令：

<v-child-component v-if="theValue !== null" :item-value="theValue"></v-child-component>