vue 使用 object 作为循环中的响应式的数据源 All In One

vue 使用 object 作为循环中的响应式的数据源 All In One

for 循环中的数据，响应不同步 bug

bug

直接使用 array 包裹 '', boolean ❌

            imgSetNames: [
                '',
            ],
            showInputErrors: [
                false,
            ],

solution

直接使用 array 包裹 object ✅

            imgSetNames: [
                {
                    setName: '',
                },
            ],
            showInputErrors: [
                {
                    showError: false
                },
            ],
            // imgSetNames: [
            //     '',
            // ],
            // showInputErrors: [
            //     false,
            // ],

            // vm.$set(vm.items, indexOfItem, newValue)
            // this.$set(this.imgSetNames, this.imgSetNames.length - 1, '');
            // this.$set(this.showInputErrors, this.showInputErrors.length - 1, false);
            // this.imgSetNames.push('');
            // this.showInputErrors.push(false);
            this.imgSetNames.push({
                setName: '',
            });
            this.showInputErrors.push({
                showError: false,
            });
            this.ruleForm.creativeList[this.creativeIndex].imageSetNames.push({
                image_set_name: '',
            });
            // this.creativeObj.imageSetNames.push({
            //     image_set_name: '',
            // });

            this.creativeGroupList = [obj];
            // this.imgSetNames = [''];
            // this.showInputErrors = [false];
            this.imgSetNames = [{
                setName: '',
            }];
            this.showInputErrors = [{
                showError: false,
            }];
            this.ruleForm.creativeList[this.creativeIndex].imageSetNames = [{
                image_set_name: '',
            }];
            this.ruleForm.creativeList[this.creativeIndex].imgList = [];
            this.ruleForm.creativeList[this.creativeIndex].imageLength = value;
            this.ruleForm.creativeList[this.creativeIndex].imageBoxesLength = value;

        imgSetNameChange (index) {
            console.log('组图名称 index', index);
            this.creativeObj.imageSetNames[index].image_set_name = this.imgSetNames[index].setName ?? '';
        },
        imgSetNameValidator (rule, value, callback, index) {
            const errMsg = '组图名称不可为空';
            console.log('组图名称 value', value, this.showInputErrors, index);
            if(!value) {
                this.showInputErrors[index].showError = true;
                callback(errMsg);
            } else {
                this.showInputErrors[index].showError = false;
                callback();
            }
        },

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---