请教Vue.js的几个问题
本文介绍了请教Vue.js的几个问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如下代码，菜鸟提出几个问题，还望路过的大神帮忙解答。
疑问：
为什么我在addPerson函数里的push完后重置newPerson就不会影响到我之前所添加的person（重置不也是改变了newPerson的值吗？）。
为什么每次点击delete会提示一个错误，但是却依然能达到删除的效果，这个怎么解决？
<!DOCTYPE html>
<html>
<head>
<title>vueStudy</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id = "test">
<div >
<label>name：</label><input type="text" name="" v-model = "newperson.name">
<label>age：</label><input type="text" name="" v-model = "newperson.age">
<input v-on:click = "addPerson" type="button" value = "add"/>
</div>
<table>
<tr v-for = "one in people">
<td>{{one.name}}</td><td>{{one.age}}</td><td><button @click = "delPerson(index)">delete</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#test",
data:{
people:[
{
name:"jack",
age:"22"
},
{
name:"mechel",
age:"25"
}
],
newperson:{
name:"",
age:""
},
},
methods:{
addPerson:function(){
this.people.push(this.newperson);
this.newperson = {name:"",age:""}
},
delPerson:function(index){
this.people.splice(index,1);
}
}
});
</script>
</body>
</html>解决方案
this.newperson每次初始化的时候都改变了指向的地址，原来push进去的那个this.newperson的地址不受影响的，this.newperson旧值新值不是同一个引用了
可能vue渲染的时候没有明确写index吧，改成下面的试试
<tr v-for = "(one,index) in people">
<td>{{one.name}}</td>
<td>{{one.age}}</td>
<td><button @click = "delPerson(index)">delete</button></td>
</tr>这篇关于请教Vue.js的几个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
