【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="http://img.readke.com/220411/0T30M445-0.jpg"><
/script>
<
div id="app">
<
div v-for="(_, i) in selected">
<
form action="">
<
select v-model="selected[i]">
<
option v-for="option in options" :value="http://www.srcmini.com/option.supp_name">
[[ option.supp_name ]]
<
/option>
<
/select>
<
span>Chosen: [[ selected[i] ]]<
/span>
<
/form>
<
/div>
<
pre>selected = [[ selected ]]<
/pre>
<
/div>
推荐阅读
- Vue渲染Json异常(返回正确,但不显示Json数据结果)
- vue cli已经有新版本了,如何更新vue cli到新版本()
- javascript项目使用async报错(regeneratorRuntime is not defined)
- JavaScript如何在forEach中使用async和await(forEach和async、await的结合使用)
- 解决React构建错误(ERROR Module build failed (from .node_modules babel-loader lib index.js))
- Vue-cli 3新建项目报错(ERRORcommand failed npm install –loglevel error —— 解决办法)
- 诺基亚实习面试|诺基亚在校园
- Python中的First Class函数介绍和用法
- 算法设计(最长剩余时间优先(LRTF)CPU调度程序)