When Vue uses a v-for rendered element list, it uses the "in-place update" strategy by default. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but will update each element in place. Create demo9.html with the following content
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> Document< /title>
< ! -- 1 . 导入 vue 脚本文件 -->
< script src = "https://unpkg.com/vue@3/dist/vue.global.js" > < /script>
< /head>
< body>
< ! -- DOM区域 -->
< div id = "app" >
< div>
< input type = "text" v-model= "name" >
< button @click= "addUser" > 添加< /button>
< /div>
< ul>
< li v-for= "(user,i) in userList" >
< input type = "checkbox" /> index: {
{
i} } name: {
{
user.name} }
< /li>
< /ul>
< /div>
< /body>
< script>
const vm = {
data: function ( ) {
return {
userList: [ {
id: 1 ,
name: 'zs'
} , {
id: 2 ,
name: 'ls'
} , {
id: 3 ,
name: 'ww'
} , ]
}
} ,
methods: {
addUser ( ) {
this.userList.unshift( {
id: this.nextId,
name: this.name
} )
this.name = ''
this.nextId++
}
} ,
}
const app = Vue.createApp( vm)
app.mount( '#app' )
< /script>
< /html>
Show results
I found that when zs is checked and then a user is added, zs is not selected.
Solution
Providing a unique key for each item allows Vue to track the identity of each node and thus reuse and reorder existing elements. The content is modified as follows
< ! DOCTYPE html>
< html lang = "en" >
< head>
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title> Document< /title>
< ! -- 1 . 导入 vue 脚本文件 -->
< script src = "https://unpkg.com/vue@3/dist/vue.global.js" > < /script>
< /head>
< body>
< ! -- DOM区域 -->
< div id = "app" >
< div>
< input type = "text" v-model= "name" >
< button @click= "addUser" > 添加< /button>
< /div>
< ul>
< li v-for= "(user,i) in userList" :key= "user.id" >
< input type = "checkbox" /> index: {
{
i} } name: {
{
user.name} }
< /li>
< /ul>
< /div>
< /body>
< script>
const vm = {
data: function ( ) {
return {
userList: [ {
id: 1 ,
name: 'zs'
} , {
id: 2 ,
name: 'ls'
} , {
id: 3 ,
name: 'ww'
} , ]
}
} ,
methods: {
addUser ( ) {
this.userList.unshift( {
id: this.nextId,
name: this.name
} )
this.name = ''
this.nextId++
}
} ,
}
const app = Vue.createApp( vm)
app.mount( '#app' )
< /script>
< /html>
Show results
