Question

我确信我在这里缺少一些简单的东西。我创建了一个可重用的子组件，其中包含如下所示的输入，并且我从父项传递给它的initialValue道具中为数据对象分配itemValue。

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

    props: ['itemValue'],

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

如果在父组件中我直接用字符串分配item-value属性，它可以正常工作。

问题是我想在父进程中进行ajax调用之后设置item-value，所以我将它绑定到使用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在ajax调用完成之前绑定到null值并设置实际值。我怎样才能达到目的？

Answer 1

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

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

Vuejs - - 在父级中的ajax请求之后为子级分配prop值。

1 个答案: