追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


使用 vue 1.0.3 $set 函数遇到的坑

2019-9-9 释然 前端及开发文章及欣赏


vue 1.0.3  中 $set 函数是动态改变或添加一个 data 中的属性值时 属性 key 不可以使用纯数字。

例如:

var app = new Vue({
     el:"#app",
     data:{
         test:{
             k1:'v1',
             k2:'v2'
         }
     },
     methods:{
         changeTestValue:function{
             // 动态改变 test 中某一属性的值
             var key = 'test.k1';  // 改变 test 属性中的 k1 的值
             this.$set(key,'changev1');  // 此处执行没有问题
            // 改变 整个 test 的值可以使用
            this.$set('test',{k1:'change-demo-v1',k2:'change-demo-v2'});   // 此处执行没有问题
            // 动态给 test 增加一个属性  k3
            this.$set('test.k3','test-add-value3');   // 此处执行没有问题
 
 
            // 此处有坑 当你的 属性为全数字的时候,则 函数无效,不报错,但是也添加不上值。
            // 例如
            this.$set('test.123','test-add-123');  // 此处执行不报错,但是也没有效果。
 
 
            // 所以在使用老版本vue的时候尽量避免 属性 key 未纯数字,或其他特殊字符。
         }
     }
});

除了这个坑以外还有另外一个坑,不过没有具体试验,
watch 监听某一值得变化,好像有点问题, 实际结果是只要 data 中的任意一个值发生变化都会被捕捉到。



最后还是使用 vue 2.x  以上版本吧,bug 少很多。



另外 $set 函数在2.x 中使用方式有所变化。



this.$set(target,key,obj);

target 对象类型,是需要赋值或修改的对象,

key  是字符串类型, 是 target 对象的属性

obj  可以是字符串,可以是对象类型,是 你要修改的或增加的值


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

标签: VUE 使用 1.0.3 $set 函数遇到的坑 « Sketch 58 Beta版本探秘,看看都有什么新功能! | 风靡社交圈的产品「绿洲」,有哪些值得关注的设计细节?»


订阅Rss