如何解决避免在vue中改变道具答案

【问题标题】：How to solve Avoid mutating a prop in vue如何解决避免在vue中改变道具
【发布时间】：2020-12-20 05:17:40
【问题描述】：

我的控制台出现此错误

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“catProducts”

这是我的 vue 组件

  <template>
    <div>
      <table class="table table-striped">
          <thead>
              <tr>
                  <th>Product Name</th>
                  <th>Remove</th>
              </tr>
          </thead>

          <tbody>
              <tr v-for="product in catProducts">
                  <td>
                      {{ product.name }}
                  </td>
                  <td>
                      <button @click="remove(product)" class="btn btn-danger">Remove</button>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>
  </template>

  <script>
    export default{ 
      props: ['category', 'catProducts'],
      data(){
        return {
          
        }
      },
      methods: {
        remove(product){
          axios.delete('/category/products/'+this.category.id+'/'+product.id).then(response => {
            this.catProducts = response.data.products;
          });
        }
      }
    }
  </script>

response.data.products; 返回的是属于该类别的所有产品。即使我的代码在删除该类别的产品方面做了它应该做的事情，我的控制台中仍然出现Avoid mutating a prop 错误，我不知道如何修复它。

【问题讨论】：

你从哪里得到catProducts？
这是 stackoverflow.com/questions/39868963/… 的副本，您只需将 catProducts 属性复制到数据变量中，然后您就可以对其进行变异。
另外你不应该直接改变一个道具，但是有一些方法可以解决它
应对数据支持可能是一种可能的解决方法，但我认为这并不总是最佳做法。
这完全取决于你从哪里得到道具

标签： vue.js

【解决方案1】：

这里有两点出错：

直接更改/改变道具catProducts

解决方案：向父组件发出类似“deleteProduct”的事件，以便它可以调用axios.delete，然后获取刷新的产品列表并覆盖作为传递的产品列表prop 到子组件。

从 HTTP DELETE 方法返回新产品列表。

解决方案：调用axios.delete，如果成功则调用axios.get 以获取产品列表并覆盖作为道具传递给子组件的产品列表。

【讨论】：

【解决方案2】：

删除调用完成后

remove(product){
  axios.delete('/category/products/'+this.category.id+'/'+product.id).then(response => {
    this.catProducts = response.data.products;
    }
  );
}

不是直接改变 prop ，而是发出一个更新事件，这样你就可以在父组件中使用同步修饰符来更新 prop。

remove(product){
  axios.delete('/category/products/'+this.category.id+'/'+product.id).then(response => {
    this.$emit("update:catProducts", response.data.products);
    }
  );
}

如果catProducts是组件的状态，则在父组件中。

<CatProductsRender :catProducts.sync="catProducts" />

【讨论】：