Question

我试图让我的vue文件接受来自父对象的对象数组并使用它创建多重选择，但是vue模板在变量初始化之前一直保持渲染状态，因此我收到一条消息，指出多重选择正在使用的数组等于null

我尝试使用文件中已计算，已安装和创建的组件进行创建，但似乎无济于事

 <template>
    <div id="my-app">

        <multiselect v-model="value" :options="prop2" :custom-label="FullName" placeholder="Select one" label="name" track-by="_id" @update="updateProp1()"></multiselect>
        <pre class="language-json"><code>{{ value  }}</code></pre>
    </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
    name: "comp",
    components: {
        Multiselect
    },
    props: ['prop1', 'prop2'],
    data: function() {
        return {
            value: null,
        }
    },
    created: function(){
        this.getProp1();
    },
    computed: {
        prop2() {
            return this.prop2;
        }
    },
    methods: {
        FullName ({ FirstName, LastName }) {
            return FirstName + " " + LastName
        },
        getProp1(){
            for(var p2 in this.prop2){
                if(this.prop1 == p2._id){
                    this.value = prop1;
                    break;
                }
            }
        },
        updateProp1(newProp1){
            this.prop1 = newProp1;
        }
    }
}
</script>

我期望在“值”变量中具有默认值的多重选择，在“选项”变量中具有所有可用选项。使用多重选择选择任何内容都将覆盖“值”变量。虽然我实际上得到的是两个有时可以工作的空数组。我认为发生这种情况是因为vue是异步的，但即使知道我不确定如何预防它。

我的变量可以初始化之前模板渲染

0 个答案: