Vue 异步绑定数据

Question

我读了很多关于这个话题的文章。但在我的情况下不同。

根据我的 json 数据，我将加载我的组件。 仅当其类型为多个时，我才需要触发一个获取数组异步的函数。

我的情况

<div v-for="(field, index) in content_fields[tab]" :key="index">
<v-text-field v-if="field.type == 'String'" v-model="content_data[field.name]" :label="field.name" :counter="field.length" max-width="100px"/>
<v-text-field v-if="field.type == 'Number'" v-model="content_data[field.name]" :label="field.name" :counter="field.length" :disabled="_readOnly(field, index)"/>
<v-menu class="my-3" v-if="field.type == 'DateTime'" :close-on-content-click="true" transition="scale-transition" max-width="290px"  min-width="290px">
<template v-slot:activator="{ on }">
<v-text-field v-model="content_data[field.name]" :label="field.name" hint="MM/DD/YYYY format" persistent-hint v-on="on"/>
</template>
<v-date-picker v-model="content_data[field.name]" no-title/>
</v-menu>
             <!-- this needs to bind async -->
<v-select v-model="content_data[field.name]" v-if="field.type == 'Multiple' && _getMultipleOptions(field.value) == true" :items="multipleRelationFields" :label="field.name"/>
</div>
<script>
export default {
methods: {
// =============================== BETA ================================
_getMultipleOptions(value) {
this.$axios.get(`/data/${value}.json`).then(({data}) => {
return true
this.multipleRelationFields = data
})            
}
}
}
</script>

因为它是一个 axios.get 它需要异步加载。 但是我在我的 v-select 中返回一个 [对象，承诺] 我无法在创建或挂载时加载，因为如果字段类型为多个，它只需要加载数据

有什么解决办法吗？

Answer 1

包装到自定义组件中

还没有测试过它，但也许它能给你一个解决方案的想法。您可以尝试将此"v-select"包装在您的自定义组件中。

具有自定义 V 模型的父组件

<template>
<div>
<my-custom-select v-if="field.type == 'Multiple'" :field="field" v-model="content_data[field.name]" />
</div>
</template>

子组件- v 模型将使用 propvalue进行处理，并发出input事件。仅当呈现组件时才会发出请求，这仅在 field.type 为多个时发出。

<template>
<div>
<v-select
v-model="selection"
:items="multipleRelationFields"
:label="field.name"
@input="onInput"
/>
</div>
</tempalte>
<script>
export default {
props : ["value","field"],
data() {
return {
multipleRelationFields = [],
selection : this.value
}
},
methods : {
onInput() {
this.$emit('input', this.selection)
}
},
mounted() {
this.$axios.get(`/data/${this.field.value}.json`)
.then(r => {
this.multipleRelationFields = r.data;
})
.catch(err => {
});
}
}
</script>