Vue数组获取下标坑
使用Vue 编写了基础的添加删除功能遇到了一个小坑<div id="app"><fieldset><legend>Create New Person</legend><div><label>姓名:</label><input v-m...
·
使用Vue 编写了基础的添加删除功能遇到了一个小坑
<div id="app">
<fieldset>
<legend>
Create New Person
</legend>
<div>
<label>姓名:</label>
<input v-model="new_person.name">
</div>
<div>
<label>年龄:</label>
<input v-model="new_person.age">
</div>
<div>
<label>性别:</label>
<select v-model="new_person.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div id="">
<input type="button" name="" id="" value="创建" v-on:click="Create_person" />
</div>
</fieldset>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td><button @click="Delete_person(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
Vue代码
<script>
var vm = new Vue({
el: "#app",
data: {
new_person: {
name: '',
age: 0,
sex: '男',
},
people: [{
name: '1',
age: 0,
sex: '',
},
{
name: '2',
age: 0,
sex: '',
},
{
name: '3',
age: 0,
sex: '',
}
],
},
methods: {
Create_person: function() {
this.people.push(this.new_person)
this.new_person = {
name: '',
age: 0,
sex: '男',
}
},
Delete_person: function(index) {
this.people.splice(index, 1);
console.log(index)
}
}
})
</script>
删除功能遇到点小坑,每次点击删除都会删除第一条内容
后来发现在下面代码处index并未获取还并未报错
<td><button @click="Delete_person(index)">删除</button></td>
// Vue 代码
Delete_person: function(index) {
this.people.splice(index, 1); //splice 命令如果传入下标将默认删除第一条
console.log(index)
}
}
由此从以下代码中查找到获取下标的方法
<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>
data里面声明:
data() {
return {
tabList: [
{ id: 0, title: "首页1" },
{ id: 1, title: "首页2" },
{ id: 2, title: "首页3" }
],
current:0
};
},
methods: {
addClass: function(index,event) {
this.current = index;
//获取点击对象
var el = event.currentTarget;
console.log("当前对象的内容:"+el.innerHTML);
console.log(this.current)
然后修改代码
<tbody>
<tr v-for="(person,index) in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td><button @click="Delete_person(index)">删除</button></td>
</tr>
</tbody>
更多推荐
已为社区贡献1条内容
所有评论(0)