vue.js - 在v-for循环中如何监测item的内部属性变化？

问题描述

问 题

代码：

<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

这篇关于vue.js - 在v-for循环中如何监测item的内部属性变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！