Question

我的控制台出现此错误

[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错误，并且不确定如何解决。

Answer 1

这里有两件事出了错：

直接更改/更改道具catProducts

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

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

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

Answer 2

删除通话结束后

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

与其直接改变道具，不如直接发射更新事件，因此您可以在父组件中使用sync修饰符来更新道具。

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" />

如何解决避免在Vue中更改道具

2 个答案: