Question

我具有以下下拉菜单模板：

......我有一个按钮<select v-model="selectedClient" class="stat-select text-u-c"> <option disabled value="">Please select a Client</option> <option>{{}}</option> </select>处理程序，我想根据某些条件填充click：

<option>

我该怎么做？

Answer 1

您可以将Vue的list rendering syntax与v-for一起使用：

<ELEMENT v-for="VARIABLE in ARRAY" :key="ITERATOR_ID">

在使用<option>的情况下，您将遇到以下情况：

<option v-for="item in options" :key="item.id">{{item.label}}</option>

...其中options是一个数据属性，包含如下数组：

[
  { id: 1, label: 'A' },
  { id: 2, label: 'B' },
  { id: 3, label: 'C' },
]

如果您想要基于<option>的{{1}}的不同集合，则可以将Department设置为不同的数组，并且数据绑定将更新this.options自动：

<option>

methods: {
  getOptions() {
    const dept = this.Department;
    if (dept === 'IT') {
      this.options = [
        { id: 1, label: 'A' },
        { id: 2, label: 'B' },
        { id: 3, label: 'C' },
      ];
    } else if (dept === 'Finance') {
      this.options = [
        { id: 4, label: 'X' },
        { id: 5, label: 'Y' },
        { id: 6, label: 'Z' },
      ];
    }
  }
}

new Vue({
  el: '#app',
  data: () => ({
    options: null,
    Department: null,
    selectedClient: null,
  }),
  methods: {
    getOptions() {
      this.selectedClient = null;
      if (this.Department === 'IT') {
        this.options = [
          { id: 1, label: 'A' },
          { id: 2, label: 'B' },
          { id: 3, label: 'C' },
        ];
      } else if (this.Department === 'Finance') {
        this.options = [
          { id: 4, label: 'X' },
          { id: 5, label: 'Y' },
          { id: 6, label: 'Z' },
        ];
      }
    }
  },
})

Vue根据条件选择选项

1 个答案: