代码:
<table>
<tbody>
<tr v-for="item in items">
<td>
<v-select :value.sync="item.a" :options="item.optionsA"></v-select>
</td>
<td>
<v-select :value.sync="item.b" :options="item.optionsB"></v-select>
</td>
</tr>
用了vue-strap
框架的v-select
下拉框,由于是模拟的下拉框,所以无法绑定change
事件。
问题如下:
当item.a发生改变时,如何改变item.optionsB?
谢谢。
可以使用 watch
來監聽 item.a
的變化做出相對應的操作:
watch: {
'item.a': function(newVal, oldVal) {
this.item.optionsB = this.item.otherOptions
}
}
或是利用 computed
來提供 item.optionsB
的內容:
jsFiddle
2016.06.23 更新
看到評論的 demo 了,可以用 methods
來取得對應的選項列表
jsFiddle
<v-select :value.sync="item.a" :options="item.optionsA"></v-select>
<v-select :value.sync="item.b" :options="getOptionsB(item.a)"
methods: {
getOptionsB: function(optionsAVal) {
optionsAVal = optionsAVal.toString()
switch(optionsAVal) {
case "A": return optionsB1
case "B": return optionsB2
default: return optionsB1
}
}
}
2016.06.25 更新
如果getOptionsB函数里需要异步返回数据的话,可以怎样实现呢?谢谢。
GoldyMark · 42 分钟前
如果需求越來越複雜,包裝成 Component
能更好組織代碼:
jsFiddle