vuejs动态绑定项目

Question

我有想要绑定到数组的基本选择。我用的是vuetify，但是这个问题是通用的。

<v-select
v-bind:items="physicianListSpeciality"
>
</v-select>

现在我想对多个数组使用相同的选择，取决于可能是医生、护士等的 offer.person 值。

data: {
offer.person: "physician" //or offer.person: "nurse"
}

例如physician 我想绑定physicianListSpeciality 对于nurse，我想绑定nurseListSpeciality， 等等

我试着做类似的东西：

<v-select
v-bind:items="`${offer.person}`ListSpeciality"
>
</v-select>

或

v-bind:items="[offer.person +'ListSpeciality']"

它们似乎都不适合我。 应该如何更正我的代码以使其正常工作？我应该使用某种计算方法还是有其他方法？

Answer 1

嗯，这取决于你的范围。 如果您在窗口范围内工作，您只需使用 window[offer.person + 'ListSpeciality'] 调用 var。

如果我们在组件范围内，并且 getter / data 'nurseListSpeciality' 存在，那么您可以从 this 上下文中调用它，如下所示：this[offer.person + 'ListSpeciality'] where offer.person 将是 'nurse'。

另一种选择是做这样的事情： 以您的商品数据为例

data() {
  return {
    jobs: {
      nurse: [
        'nurse item A',
        'nurse item B',
        'nurse item C',
      ],
      physician: [
        'physician item A',
        'physician item B',
        'physician item C',
      ],
    },
  };
}

那么你可以像这样得到项目：

// offer.person = 'nurse';
<v-select
  :items="jobs[offer.person]"
>
</v-select>