這是一個不需要的影片錯誤，似乎很正常，但我希望元素被影片化，它位于<input v-model="todo"/>. 問題是每次我按下添加按鈕添加待辦事項名稱 ( <input v-model="todo"/>) 時，最后一個元素“last”都會運行影片。
Ps 我試圖使代碼盡可能簡單。
Vue.createApp({
data() {
return {
todo: "",
todo_list: ['last'],
};
},
methods: {
add() {
this.todo_list.unshift(this.todo);
console.log(this.todo_list);
},
remove(index) {
this.todo_list.splice(index, 1);
},
},
}).mount('#app');.list-enter-active,
.list-leave-active {
transition: all 200ms ease-out;
}
.list-enter-from {
transform: translateY(-20px);
}
.list-leave-to {
opacity: 0;
transform: translateX(20px);
}
article {
width: 50%;
padding: 10px;
background-color: #dddddd;
border: 1px solid #cfcfcf;
border-radius: 5px;
margin-block: 10px
}<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<input type="text" v-model="todo" /> <button @click="add">add</button>
<transition-group name="list" tag="section">
<article v-for="(todo, index) in todo_list" :key="index" @click="remove(index)">
<span>{{ todo }}</span>
</article>
</transition-group>
</div>uj5u.com熱心網友回復：
您遇到此問題的原因是因為您使用的index是key. 如果您將元素添加到串列的末尾，那就沒問題了。但是由于您將它添加到開頭，它會導致您看到的問題。
我建議您將每個todo物件都設為物件，并為每個物件添加一個唯一識別符號。這可以是您遞增的簡單整數。然后您可以將該屬性用作key.
例子
顯示代碼片段
let id = 1;
Vue.createApp({
data() {
return {
todo: "",
todo_list: [{
id: id ,
value: 'last'
}],
};
},
methods: {
add() {
const todo = {
id: id ,
value: this.todo
}
this.todo_list.unshift(todo);
},
remove(index) {
this.todo_list.splice(index, 1);
},
},
}).mount('#app');.list-enter-active,
.list-leave-active {
transition: all 200ms ease-out;
}
.list-enter-from {
transform: translateY(-20px);
}
.list-leave-to {
opacity: 0;
transform: translateX(20px);
}
article {
width: 50%;
padding: 10px;
background-color: #dddddd;
border: 1px solid #cfcfcf;
border-radius: 5px;
margin-block: 10px
}<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<input type="text" v-model="todo" /> <button @click="add">add</button>
<transition-group name="list" tag="section">
<article v-for="(todo, index) in todo_list" :key="todo.id" @click="remove(index)">
<span>{{ todo.value }}</span>
</article>
</transition-group>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/405775.html
標籤：