javascript - 在 vue.js 中获取具有动态行的表中的选择标记值
问题描述
我想在 VM 数据中设置选择标签的值。
<table id="vm" v-cloak>
<thead>
<tr>
<th>Select</th><th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, i) in rowData">
<td>
<select v-model="selected" @change="changeDate($event)">
<option v-for="sItem in selectItems" :value="sItem.val">{{sItem.lbl}}</option>
</select>
</td>
<td>
<button @click="addRow(i)">+</button>
<button @click="removeRow(i)">-</button>
</td>
</tr>
</tbody>
</table>
我的剧本
// Select tag items
const SELECT_ITEMS = [
{val:"1", lbl:"Val1"},
{val:"2", lbl:"Val2"},
{val:"3", lbl:"Val3"}
];
// my vm
new Vue({
el: "#vm",
data:{
rowData:[{val:"1"},{val:"2"}],
selected : '',
selectItems : SELECT_ITEMS
},
methods:{
// add new row
addRow(i){
let row = {
val : this.selected,
};
this.rowData.splice(i, 0, row);
this.val = '';
},
// remove current row
removeRow(i){
this.rowData.splice(i,1);
},
changeDate(e){
// I want to set a value to item in rowData.
console.log(e.target.value);
}
}
});
不知道如何将选中的数据设置为rowData当前行的数据。
而且,更改一项会更改所有项目。
而且,我想在加载时添加选定的属性。
解决方案
为什么不直接使用rowData
in v-model
?
演示:
<tr v-for="(item, i) in rowData">
<td>
<select v-model="rowData[i].val" @change="changeDate($event)">
<option v-for="sItem in selectItems" :value="sItem.val">{{sItem.lbl}}</option>
</select>
</td>
<td>
<button @click="addRow(i)">+</button>
<button @click="removeRow(i)">-</button>
</td>
</tr>
推荐阅读
- python - 创建与 Windows 上安装的版本不同的 Python 虚拟环境
- python - 为什么我无法分配给这个占位符?
- list - Terraform - 如何加入嵌套列表的元素?
- date - 如何在日期公式中将月份的第一个字母大写?
- bash - 从bash脚本中的变量中提取数字
- airflow - 由于语法错误,Apache Airflow initdb 命令失败
- sql - 如何从记录中获取数据作为列名
- angular - 登录后量角器 e2e 测试无法识别导航栏中的更改
- java - 正则表达式替换java中轮询路径中的文件夹名称
- spring - Spring 配置文件:拒绝用户运行来自同一“组”的许多配置文件