ESLint & vue/no-mutating-props All In One

ESLint & vue/no-mutating-props All In One

Unexpected mutation of "ruleForm" prop. (vue/no-mutating-props) eslint

https://codesandbox.io/s/vue-reactive-object-data-bug-2wgpp?file=/src/components/Child.vue:1090-1303

  mounted() {
    // 不要直接修改 props
    // this.ruleForm.creativeBoxList[0] = {};
    // this.ruleForm.creativeBoxList.push({});
    // 初始化
    // this.$emit("create-object", {});
    this.$emit("create-object", {
      isShowLabel: null,
      isShowAppStore: null,
      isShowAction: null,
    });
    console.log("init child", this.ruleForm.creativeBoxList);
    // console.log("init child", this.ruleForm.creativeBoxList[0]);
    setTimeout(() => {
      // 更新 ❌
      // Unexpected mutation of "ruleForm" prop. (vue/no-mutating-props)eslint
      this.ruleForm.creativeBoxList[0] = Object.assign(
        this.ruleForm.creativeBoxList[0],
        {
          isShowLabel: false,
          isShowAppStore: true,
          isShowAction: false,
        }
      );
      // ✅ 更新
      // Object.assign(this.ruleForm.creativeBoxList[0], {
      //   isShowLabel: false,
      //   isShowAppStore: true,
      //   isShowAction: false,
      // });
    }, 1000);
  },