vue2 Unexpected mutation of “xxx“ prop解决方法

这个错误通常会出现在 Vue 2 中使用了单向数据绑定的情况下，如果尝试在子组件中修改了父组件传递的 prop 值，就会触发这个错误。

解决方法有两个：

1. 使用双向数据绑定，即使用 `v-model` 指令，这样就可以直接修改父组件的值。

2. 在子组件中使用一个局部变量来接收父组件传递的 prop 值，然后在子组件内部处理这个值，不要直接修改父组件的值。

举个例子，如果父组件传递了一个名为 `value` 的 prop，子组件可以这样处理：

props: {
  value: {
    type: String,
    required: true
  }
},
data() {
  return {
    internalValue: this.value
  }
},
methods: {
  handleInput(event) {
    this.internalValue = event.target.value;
    this.$emit('input', this.internalValue);
  }
}

这样，在子组件内部修改 `internalValue` 的值，并且在修改后通过 `$emit` 方法将新的值发送给父组件，从而不会触发上述的错误。

相关问题

插件解决vue3.2 error Unexpected mutation of "datas" prop vue/no-mutating-prop

这个错误是因为Vue 3.2引入了一个新的规则来防止直接修改props中的数据。这是为了更好地保护应用程序的健壮性和可维护性。

要解决这个错误，有几种方法：

1. 在组件中使用一个本地的变量来存储props中的数据，然后对该本地变量进行修改。

例如：

<template>
  <div>
    <button @click="updateDatas">Update datas</button>
  </div>
</template>

<script>
export default {
  props: {
    datas: Array
  },
  data() {
    return {
      localDatas: this.datas
    }
  },
  methods: {
    updateDatas() {
      this.localDatas.push({ id: 4, name: 'John' });
    }
  }
}
</script>

2. 使用计算属性来返回props中的数据，并在计算属性中进行修改。

例如：

<template>
  <div>
    <button @click="updateDatas">Update datas</button>
  </div>
</template>

<script>
export default {
  props: {
    datas: Array
  },
  computed: {
    localDatas: {
      get() {
        return this.datas;
      },
      set(value) {
        this.$emit('update:datas', value);
      }
    }
  },
  methods: {
    updateDatas() {
      const updatedDatas = [...this.localDatas, { id: 4, name: 'John' }];
      this.localDatas = updatedDatas;
    }
  }
}
</script>

这些方法都可以解决这个错误，具体选择哪一种方法取决于你的具体情况。

Unexpected mutation of "data" prop

"Unexpected mutation of 'data' prop"是Vue.js中的一个错误，它表示你正在尝试修改一个父组件传递给子组件的prop。这是不允许的，因为prop应该是只读的，子组不应该修改它们。这是为了确保数据流向的单向性，从而使组件更易于理解和调试。

解决这个问题的方法是在子组件中使用prop的副本，而不是直接修改它。你可以使用计算属性或者watch来创建一个副本，然后在子组件中使用副本而不是prop本身。

以下是一个使用计算属性解决"Unexpected mutation of 'data' prop"问题的例子：

<template>
  <div>
    <p>{{ infoCopy }}</p>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      required: true
    }
  },
  computed: {
    infoCopy() {
      return this.data;
    }
  }
};
</script>