zoukankan      html  css  js  c++  java
  • vue中对象和数组无法触发双向绑定的情况以及解决方案

    1. 修改数组中的内容,数组发生了改变,而页面没有发生改变。

    解决方案是通过$set方法来设置数组的值,该方法有三个参数,第一个是要被设置值的目标对象,第二个是设置值在数组中的索引,第三个是设置的值

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
                [v-cloak]{
                    display: none;
                }
            </style>
        </head>
        <body>
            <div id="app" v-cloak>
                <div v-for="item in testArr">
                    {{item}}
                </div>
                <button @click="click1">点击1</button>
                <button @click="click2">点击2</button>
            </div>
                
        </body>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            window.vm = new Vue({    
                el:'#app',
                data:{
                    testArr : [1,2,3]
                },
                methods:{
                    click1:function(){
                        console.log("修改第一个数字,页面没有修改");
                        this.testArr[0] = this.testArr[0]+1;
                    },
                    click2:function(){
                        console.log("修改了数字,页面发生了修改");
                        vm.$set(this.testArr,0, this.testArr[0]+1);
                    }
                }
            })
        </script>
    </html>

    2. 修改对象的属性,但是页面的值没有发生改变。

    导致这种情况的原因是:在vue对象的data中没有设置对象的属性。

    解决方法:一。直接在vue的data中设置无法双向绑定的属性。

         二。使用$set来设置属性。

    解决方法一适用于在页面加载前就清楚对象包含哪些属性值。但往往有的时候,数据是通过ajax拿到的,并不清楚要绑定的属性名称,这时候更适合使用方法二。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <body>
            
            <div id="app">
                {{test1.name}}
                <br />
                <button @click="click1">点击添加属性</button>
                <button @click="click2">使用$set添加属性</button>
            </div>
                
        </body>
        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            
            window.vm = new Vue({
                
                el:'#app',
                data:{
                    test1:{
                        // name : ''    解决方案一:直接初始化属性
                    }
                },
                methods:{
                    click1:function(){
                        this.test1.name = "小明";
                        console.log("属性添加失败,原因是test1的name属性没有预先初始化");
                    },
                    click2:function(){
                        // 解决方案二:使用$set来解决
                        vm.$set(this.test1,"name","小明");
                        console.log("属性添加成功");
                    }
                }
            })
        </script>
    </html>
  • 相关阅读:
    初识WEB:输入URL之后的故事
    ecshop ecmall shopex
    .net 4.5如何使用Async和Await进行异步编程
    C#中yield用法
    安装Ecshop首页出现报错:Only variables should be passed by referen
    Ecshop安装过程中的的问题:cls_image::gd_version()和不支持JPEG
    javascript 操作dom
    使用X-UA-Compatible来设置IE浏览器兼容模式
    createDocumentFragment
    ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法
  • 原文地址:https://www.cnblogs.com/mayiaction/p/11895937.html
Copyright © 2011-2022 走看看