vue使用model改变数据后导致已经push到数组中的数据也改变

左手的ㄟ右手 2023-05-28 09:53 2阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../vue.js"></script>
        <style>
            table {
                border: 1px solid #ccc;
                border-spacing: 0;
            }
    
            th,
            td {
                width: 200px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    
    <body>
        <div id="app">
    
            英雄名称<input v-model="saveDate.personName" type="text">
            英雄技能 <input v-model="saveDate.personSkil" type="text">
            <button @click="save">save</button>
    
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>技能</th>
                        <th>opration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in person">
                        <td>{
       {index}}</td>
                        <td>{
       {item.personName}}</td>
                        <td>{
       {item.personSkil}}</td>
                        <td> <button @click="del(index)">删除</button> </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    saveDate:{
                        personName: "",
                        personSkil: ""
                    },
                    person: [{
                        personName: "张三",
                        personSkil: "杀人"
                    }, {
                        personName: "李四",
                        personSkil: "防火"
                    }, {
                        personName: "赵六",
                        personSkil: "放屁"
                    }]
                },
                methods: {
                    save() {
                        this.person.push(this.saveDate)
                        console.log(this.saveDate)
                    },
                    del(index) {
                        this.person.splice(index, 1)
                    }
                },
            })
        </script>
    </body>
    
    </html>

### 解决办法 ###

把model绑定的对象，更改成绑定变量，解决问题

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script src="../vue.js"></script>
        <style>
            table {
                border: 1px solid #ccc;
                border-spacing: 0;
            }
            th,
            td {
                width: 200px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="app">
            英雄名称<input v-model="personName" type="text">
            英雄技能 <input v-model="personSkil" type="text">
            <button @click="save">save</button>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>技能</th>
                        <th>opration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in person">
                        <td>{
       {index}}</td>
                        <td>{
       {item.personName}}</td>
                        <td>{
       {item.personSkil}}</td>
                        <td> <button @click="del(index)">删除</button> </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    personName: "",
                    personSkil: "",
                    person: [{
                        personName: "张三",
                        personSkil: "杀人"
                    }, {
                        personName: "李四",
                        personSkil: "防火"
                    }, {
                        personName: "赵六",
                        personSkil: "放屁"
                    }]
                },
                methods: {
                    save() {
                        this.person.push({personName:this.personName,personSkil:this.personSkil})
                    },
                    del(index) {
                        this.person.splice(index, 1)
                    }
                },
            })
        </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: /images/20230528/837da776ebaa415493e275ba7332020b.png