Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" 报错解决

这个报错是因为在子组件中直接修改了父组件传递的 prop 属性，而 Vue.js 不允许直接修改 props 的值，因为 props 是由父组件传递给子组件的，子组件应该保持对这些 props 的只读访问。

要解决这个报错，你可以通过以下两种方式之一来避免直接修改 props 值：

1. 使用一个本地的 data 属性或计算属性来存储需要修改的值，并在子组件中操作这个本地属性。这样可以避免直接修改 props。

2. 如果需要在子组件中修改父组件的数据，可以通过触发事件的方式，将需要修改的值作为 payload，传递给父组件。然后在父组件中监听事件，并在事件处理函数中更新相应的数据。

下面是示例代码，演示如何避免直接修改 props 值：

<template>
  <div>
    <button @click="updateProp">Update Prop</button>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateProp() {
      // Option 1: 使用本地的 data 属性或计算属性
      this.localValue = 'New value';

      // Option 2: 触发事件更新父组件的数据
      this.$emit('update:value', 'New value');
    }
  }
}
</script>

在上述示例中，你可以根据你的具体需求选择合适的方式来解决这个问题。