Vue中如何实现多个选择表单元素互相独立？

Vue中如何实现多个选择表单元素相互独立？这个问题是说，使用足够多的选择表单元素，使得这些元素与数据（如数组）的大小相匹配，并且这些表单元素互相独立，选择一个元素不会应用其它元素的值。

实现代码如下面的代码：

var app = new Vue({
  el: "#app",
  delimiters: ["[[", "]]"],
  data: {
    selected: [], // 创建一个selected数组
    options: [{"id":20,"supp_name":"test1"},{"id":21,"supp_name":"test2"},{"id":34,"supp_name":"supertest"}]
  },
  watch: {
    options: {
      immediate: true,
      handler (options) {
        // 从options中初始化"supp_name"
        this.selected = options.map(({ supp_name }) => supp_name)
      }
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <div v-for="(_, i) in selected">
    <form action="">
      <select v-model="selected[i]">
        <option v-for="option in options" :value="option.supp_name">
          [[ option.supp_name ]]
        </option>
      </select>
      <span>Chosen: [[ selected[i] ]]</span>
    </form>
  </div>
  <pre>selected = [[ selected ]]</pre>
</div>

来源：

https://www.srcmini02.com/1855.html

猜你喜欢