JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-4-12 12:03:33

由于初始化类型错误导致的不更新，代码是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app-7">
        <div @click="update()">update</div>
        <ol>
            <li v-for="item in groceryList" v-bind:key="item.id">
                {{item.text}}
            </li>
        </ol>
    </div>
</body>
<script type="text/javascript">
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: []
        },
        methods: {
            update: function() {
                this.groceryList[0].text = "newvalue"
            }
        },
        created: function() {
            let adddata = [];
            adddata.id = 0;
            adddata.text = "test";
            this.groceryList.push(adddata);
        }
    });
</script>

</html>

使用索引直接更新数组中的项目，比如：

 this.groceryList[0].text = "newvalue"

发现视图中的项目并不会更新
问题出在 let adddata = []; 写错了，让adddata是一个数组类型了，vue在监听数据更新的时候，判断是数组类型，并不会对它的属性的变更做处理，而只会对数组里元素的改变做处理，把 let adddata = []; 改成 let adddata = {};即可
或这样也可以：

let adddata = {
                id: 0,
                text: "test"
            };
    
this.groceryList.push(adddata);

vue不能检测到数组元素的直接赋值，比如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app-7">
        <div @click="update()">update</div>
        <ol>
            <li v-for="item in groceryList" v-bind:key="item.id">
                {{item.text}}
            </li>
        </ol>
    </div>
</body>
<script type="text/javascript">
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: []
        },
        methods: {
            update: function() {
                this.groceryList[0] = {
                    id: 0,
                    text: "newvalue"
                };
            }
        },
        created: function() {
            let adddata = {
                id: 0,
                text: "test"
            };

            this.groceryList.push(adddata);
        }
    });
</script>

</html>

 this.groceryList[0] = {
                    id: 0,
                    text: "newvalue"
                };
            }

vue不能检测这种改变，只能检测到push,pop等元素出入栈的操作
可以改成这样,把旧元素替换成新元素（旧元素出栈，新元素入栈）

update: function() {
                this.groceryList.splice(0, 1, {
                    id: 0,
                    text: "newvalue"
                });
                
            }
        },

即使groceryList是一个普通的非对象数组，也需要这样才能同步更新视图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>

<body>
    <div id="app-7">
        <div @click="update()">update</div>
        <ol>
            <li v-for="item in groceryList" v-bind:key="item.id">
                {{item}}
            </li>
        </ol>
    </div>
</body>
<script type="text/javascript">
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: []
        },
        methods: {
            update: function() {
                //this.groceryList[0] = "newvalue";//不行
                this.groceryList.splice(0, 1, "newvalue");
            }
        },
        created: function() {
            let adddata = "test";


            this.groceryList.push(adddata);
        }
    });
</script>

</html>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

Vue使用v-for显示列表时，数组里的item数据更新，视图中列表不同步更新的解决方法