vue小白填坑--深入响应式原理

原创 大喵 译文 vue 237阅读 2018-07-04 17:28:10 举报

父组件动态添加多选题个数

子组件进行渲染

wholeCheckBoxs是父组件传进来的值
wholeCheckBoxContents是一个空的一维数组
但由于是一维数组的原因,第一个填空题的位置只能填写一个数据,而我们使用CheckBox就是想获取多个数据
于是我在页面上添加一个测试按钮,函数执行如下代码:

当我点击时手动将wholeCheckBoxs变成一个二维数组
打印出来的结果如下:

感觉看起来让人很满意啊
但是点击以后就很不美妙了

我的数组为啥被吞了一个
查看了百度发现一篇文章中介绍了类似的问题https://www.cnblogs.com/w2xh/p/8260752.html
我在我的代码里对wholeCheckBoxs进行监听

翻看了vue深入响应式原理https://cn.vuejs.org/v2/guide/reactivity.html
里面是这么写的:
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)
Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值
Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

总而言之就是之前的方法不响应,所以还是打印出0:true的情况

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复