Question

我正在尝试使用包含不同属性的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>

Answer 1

问题在于vm中的值不是您所期望的。如果要根据组件的另一个变量设置值，请使用计算属性。

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

在Vue中进行动态组件渲染以进行v-select

1 个答案: