the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>
ul li {
list-style: none;
}
.done {
text-decoration: line-through;
color: indianred;
}
</style>
<body>
<div id="app">
<div>
3 of {{todo.length}} remaning[arctive]
<ul>
<li v-for="(item,index) of todo" :key="item.index">
<input type="checkbox" v-model="item.done">
<span :class="{done:item.done}">{{item.id}}---{{item.content}}</span>
<button @click="deleteClick(index)">X</button>
</li>
</ul>
</div>
<input type="text" v-model="todoText" @keydown.enter="addToClick">
<button @click="addToClick"></button>
</div>
<script>
const app = new Vue({
el: "-sharpapp",
data: {
todoText: "",
todo: [
{id: 1, content: "FOO", done: true},
],
},
methods: {
addToClick: function () {
if (this.todoText === "") {//
return
}
this.todo.push({
id: this.todo[this.todo.length - 1].id + 1,
content: this.todoText.trim(),
done: false
});
this.todoText = "";
},
deleteClick: function (index) {
console.log(index);
this.todo.splice(index, 1);
}
}
})
</script>
</body>
</html>
there is a requirement:
when I click on the 8th, delete it, and the following 9Magol 10. 11 becomes 8jin9. 10. and so on. Do you need to re-render the deleteClick during the click event?
which experienced friend should I ask? Thank you