Vue 中的动态组件渲染用于 v-select答案

【问题标题】：Dynamic component render in Vue for v-selectVue 中的动态组件渲染用于 v-select
【发布时间】：2020-05-22 13:43:48
【问题描述】：

我正在尝试使用包含不同属性的 JSON 对象动态加载 v-select (vuetify) 组件我有多个选择组件，其中选项将由 API 提供，我想每次动态加载 v-select 组件，因为此架构也可用于其他组件，例如 v-text-field

问题是性别数组（其他类似的数组以及部门和经理）将由 API 提供，因此它需要动态加载到 v-select 组件但使用 vm（查看模式）我不能这样做。

我尝试使用计算属性和方法来检索性别数组，但没有成功。

Vue

<component :is="schema.component" v-model="jsonData[schema.value]" v-bind="schema.props"  v-on="schema.on">

脚本

<script>
import {
  VSelect
} from 'vuetify/lib';

export default {
  components: {
    VSelect
  },
  data() {
    const vm = this;
    return {
     genders:['Male', 'Female', 'Other'],
     jsonData:{},
     schema: {
          component: 'v-select',
          value: 'GENDER',
          props: {
            items: vm.genders
          },
          on: {
          }
        }
    }
  }
}
</script>

【问题讨论】：

is prop 接受组件而不是字符串。因此，不要将'v-select' 传递给is prop，而是尝试传递导入的VSelect 变量。
是的，我知道，但我已经注册了 VSelect 组件。并且组件渲染得很好，只是它没有从性别数组中获取数据项，这是这里的一个问题。

标签： javascript vue.js vuetify.js

【解决方案1】：

问题是vm 不是你所期望的。当您想根据组件的另一个变量设置值时，请使用计算属性。

data() {
  return {
    genders:['Male', 'Female', 'Other'],
    jsonData:{}
  }
},
computed: {
  schema () {
    return {
      component: 'v-select',
      value: 'GENDER',
      props: { items: this.genders },
      on: {}
    }
  }
}

【讨论】：