Vue.js 依赖 select

Question

我正处于学习的初级阶段 Vue.js，遇到了我现在无法解决的问题。所以我有 1 个 select 字段：

data: {
  list: {
    'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ]
  }
}

然后我像这样填充第一个 select 字段：

<select v-model="firstOptions" v-on:change="onChange">
  <option v-for="(item, index) in list">{{ index }}</option>
</select>

此时一切正常，但是如何根据第一个 select 填充另一个 select 字段？我需要访问尺寸和价格。

我认为应该在这里完成：

methods: {
  onChange: function() {
   // get options for second select field
  }
}

Answer 1

我假设在您的数据结构 list 中，每个属性的值定义了您将在第二个 select 中使用的选项。这里的关键是第一个 select 的模型驱动第二个的选项。

<option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>

我不确定您希望文本和值在第一个或第二个 select 中的布局如何，但这里有一个示例。

new Vue({
  el:"#app",
  data: {
    firstOption: null,
    secondOption: null,
    list: {
      'Option 1': [ { size:'1',prize:'5' }, { size:'2',prize:'10' } ],
      'Option 2': [{size:'3', prize:'8'}]
    }
  }
})

并在您的模板中

<div id="app">
  <select v-model="firstOption">
    <option v-for="(item, index) in list">{{ index }}</option>
  </select>
  <select v-model="secondOption" v-if="firstOption">
    <option v-for="option in list[firstOption]" value="option.size">{{option.prize}}</option>
  </select>
</div>

Example in codepen.

Vue.js 依赖 select

Vue.js dependent select

javascript

vue.js

vuejs2