javascript - vue删除节点问题
本文介绍了javascript - vue删除节点问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<body>
<div id="app">
<div v-for="(item,index) in items" :id="item.id">
{{item.name}}
<button @click="deleteNode(index,item.id)">删除</button>
</div>
</div>
<script src="./plugins/jquery-2.2.1.mini.js"></script>
<script src="./plugins/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
{id: "d1", name: "test1"},
{id: "d2", name: "test2"},
{id: "d3", name: "test3"},
{id: "d4", name: "test4"},
]
},
methods:{
deleteNode:function (index,id) {
$("#"+id).remove(); //这里我一定要自己先手动删除dom，实际项目中使用了一个插件的方法从画布中移除节点，关联比较多
this.items.splice(index, 1);
}
}
})
</script>
</body>如图这样会导致同时删除两个节点，因为我手动删除了一个节点，但并没有删除数据，这时我再用vue删除对应数据会导致下一个节点被删除，就一共删除了两个节点
vue有没有办法先自己手动删除节点（这个节点一定要自己手动删除，因为要另外调用了一个插件的删除方法），然后再用vue删除数据？
解决方案
楼上的我试了一下，jq删除节点以后，数据还是在的。
我自己测试了一下也有这个问题，但是，我有一个比较取巧的方法，vue里面数组的长度变化是不会触发视图更新，所以呢，思路就是，把你的要删除的这个数据调换位置到最后去，然后，数组length - 1；可以达到删除数据又可以不触发视图。
`
new Vue({
el: '.col-xs-12',
data: {
testAry: [{
id: 1,
name: 21,
}, {
id: 2,
name: 22,
}, {
id: 3,
name: 23,
}],
},
methods: {
clickMe: function() {
var item = $('#' + 2);
item.remove();
console.log(JSON.stringify(this.testAry));
this.testAry.exchange(1,2);
this.testAry.length = this.testAry.length - 1;
console.log(JSON.stringify(this.testAry));
},
},
created:function(){
Array.prototype.exchange = function(preindex,aimIndex){
var temp = this[preindex];
this[preindex] = this[aimIndex];
this[aimIndex] = temp;
}
}
});`
随便写的肯定有bug，自己看情况调试一下。
这篇关于javascript - vue删除节点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
