【问题标题】：Vue async bind dataVue 异步绑定数据
【发布时间】：2020-05-12 15:25:11
【问题描述】：

我已经阅读了很多关于这个主题的帖子。但我的情况不同。

根据我的 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 它需要异步加载。但我得到了一个 [object,promise in my v-select] 我无法在创建或安装时加载，因为它只需要在字段类型为多个时加载数据

有什么解决办法吗？

【问题讨论】：

这是什么return true this.multipleRelationFields = data？
返回true表示数据已加载。它在 v-if 中。多个关系字段是我在 v-select 中绑定的项目
return之后不能绑定任何东西。
我没有添加数据函数但是this.multipleRelationFields是一个数据属性
this.multipleRelationFields = data - 这不会被执行。

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

包装成自定义组件

尚未对其进行测试，但也许它可以为您提供解决方案的想法。您可以尝试将此“v-select”包装在您的自定义组件中。

父组件与自定义 v-model

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

子组件 - v-model 将使用 prop value 处理并发出 input 事件。只有在渲染组件时才会发出请求，只有当 field.type 为 Multiple 时才会发出请求。

<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>

【讨论】：