场景是点击add按钮新增一行input,现在我给每个input赋上了不同的值a,b,c
现在遇到这样一个问题,当点击中间的remove按钮删除第二个值是b的行,可结果是第三个值是c的行被删掉了,想要的效果是
请问怎么解决这个问题呢,目前我的代码是
<template>
<div id="app">
<button @click="add">add</button>
<div v-for="(item,index) in list" :key="index">
<input type="text">
<button @click="remove(index)">remove</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list:[]
};
},
methods: {
add() {
this.list.push(1)
},
remove(index) {
this.list.splice(index,1)
}
}
};
</script>