vue3.2 error Unexpected mutation of "datas" prop vue/no-mutating-prop

这个错误是因为你正在尝试直接修改传递给子组件的 `datas` 属性。在 Vue 3 中， props 是不可变的，不能在子组件中直接修改。

为了解决这个问题，你需要在子组件中使用一个本地的数据变量来保存传递给它的 `datas` 属性。你可以通过添加一个 `data` 函数来实现这一点，然后在 `mounted` 钩子中将 `datas` 属性复制到本地变量中。例如：

<template>
  <div>
    <ul>
      <li v-for="item in localDatas" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      localDatas: []
    }
  },
  mounted() {
    this.localDatas = [...this.datas]
  }
}
</script>

这样就可以避免直接修改 `datas` 属性而导致的错误。

相关问题

插件解决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 "channelList" prop vue/no-mutating-props

这是Vue.js的警告信息，意思是在组件中修改了一个被声明为 props 的属性 channelList。在Vue.js中，props是从父组件传递给子组件的属性，子组件不能直接修改这些属性，否则可能会导致数据混乱或不一致。

为了避免这个问题，可以在子组件内部使用一个本地的变量来存储 channelList 的值，并在需要修改时对其进行操作，而不是直接修改 props。例如，可以在组件内部声明一个 data 属性，然后在组件的生命周期钩子函数中将 props 的值赋给该属性：

<template>
  <div>{{ localChannelList }}</div>
</template>

<script>
export default {
  props: {
    channelList: {
      type: Array,
      required: true
    }
  },
  
  data() {
    return {
      localChannelList: []
    }
  },
  
  created() {
    this.localChannelList = [...this.channelList];
  }
}
</script>

这样就可以避免直接修改 props 的问题，同时保持子组件内部数据的一致性。