Question

这是我的代码

                <li>
                  <select v-model="selectYear" id="search-year" class="w-100 text-center mb-1" name="year" >
                    <option v-for="year in years" v-bind:value="year.value">
                      {{ year.text }}
                    </option>
                  </select>
                </li>
                <li>
                  <select v-model="selectMake" class="w-100 text-center mb-1" name="make">
                    <option v-for="make in makes" v-bind:value="make.value">
                      {{ make.text }}
                    </option>
                  </select>
                </li>

和组件数据：

export default {
  name: 'search',
  data: function () {
    return{
      selectYear: '2017',
      years: [
        { text: '2017', year: '2017' },
        { text: '2016', year: '2016' },
        { text: '2015', year: '2015' }
      ],
      selectMake: '',
      makes: [
        { text: 'Sony', value: 'Sony', year: '2017' },
        { text: 'Asus', value: 'Asus', year: '2017' },
        { text: 'IPhone', value: 'IPhone', year: '2016'}
      ]
    }
  }
}

我想要什么 我有多个选择选项，根据以前选择的选项显示的内容。

例如

场景1 ：选定年份：2017

        Select Make Options Available: ['Sony','Asus']

场景2：选定年份：2017

        Select Make Options Available: ['Iphone']

场景3：选择年份：无

        Select Make Options Available: []

是否可以在Vue.js中实现？

Answer 1

这是您使用computed值的典型案例。

根据filteredMakes

将计算值makes添加到filter selectYear

computed: {
    filteredMakes() {
        return this.makes.filter((obj, i) => {
            return obj.year === this.selectYear
        });
    }
}

并使用v-for中的计算值作为选项

<option v-for="make in filteredMakes" v-bind:value="make.value">

每次filteredMakes更改时，

selectYear都会自动更新。不是Vue神奇吗？

Vue.js连接多个选择选项的数据

1 个答案: