个性化阅读
专注于IT技术分析

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>
赞(0)
未经允许不得转载:srcmini » Vue中如何实现多个选择表单元素互相独立?

评论 抢沙发

评论前必须登录!