Vue.js依赖选择

Question

我正处于初学阶段学习Vue.js并遇到了我现在无法弄清楚的问题.所以我有1个选择字段:

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

然后我填充第一个选择字段,如下所示:

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

此时一切都很好,但如何根据第一个选择填充另一个选择字段？我需要访问尺寸和价格.

我认为这应该在这里完成:

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

Answer 1

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

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

我不确定你想要在第一个或第二个选择中列出你的文本和值,但这是一个例子.

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>

codepen中的示例.