父组件动态添加多选题个数
子组件进行渲染
- <div class="messageInLab" v-for="(messageLab,messIndex) in wholeCheckBoxs" :key='messageLab.title'>
- <p>{{messageLab.title}}:</p>
- <el-checkbox-group v-model="wholeCheckBoxContents[messIndex]">
- <el-checkbox v-for="(lab,num) in messageLab.choice" :key='lab' :label="num">{{lab}}</el-checkbox>
- </el-checkbox-group>
- </div>
wholeCheckBoxs 是父组件传进来的值
wholeCheckBoxContents 是一个空的一维数组
但由于是一维数组的原因, 第一个填空题的位置只能填写一个数据, 而我们使用 CheckBox 就是想获取多个数据
于是我在页面上添加一个测试按钮, 函数执行如下代码:
- for (let key in this.wholeCheckBoxs) {
- this.wholeCheckBoxContents[key] = []
- }
当我点击时手动将 wholeCheckBoxs 变成一个二维数组
打印出来的结果如下:
感觉看起来让人很满意啊
但是点击以后就很不美妙了
我的数组为啥被吞了一个
查看了百度发现一篇文章中介绍了类似的问题 https://www.cnblogs.com/w2xh/p/8260752.html
我在我的代码里对 wholeCheckBoxs 进行监听
- watch: {
- // 如果 `wholeCheckBoxs` 发生改变, 这个函数就会运行, 将 wholeCheckBoxContents 变成二维数组
- wholeCheckBoxs: function () {
- for (let key in this.wholeCheckBoxs) {
- this.$set(this.wholeCheckBoxContents, key, [])
- }
- }
- }
翻看了 vue 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html
里面是这么写的:
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)
Vue 不允许动态添加根级响应式属性, 所以你必须在初始化实例前声明根级响应式属性, 哪怕只是一个空值
Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
总而言之就是之前的方法不响应, 所以还是打印出 0:true 的情况
来源: http://www.qdfuns.com/article/49449/9e742d0904d94439d4e79191aa3d9bd6.html