Question

我用v-for显示了一个数组“产品”。对于每种产品，都有一个将产品添加到对象“订单”的按钮。对象的“顺序”看起来像

order: {
  products: [{
    quantity: 0,
    otherProperties
  }]
}

再次单击该按钮时，我想将数量增加1。

因此，在Vuex中，我传递了被单击的对象：

increaseQuantity(state, product){
  state.order.products.find((orderProduct)=>{
    return product.id === orderProduct.id
  }).quantity++;

到目前为止一切顺利。我可以在chrome开发工具中看到数量的增加。

现在很棘手的事情，尽管听起来很简单，但我不知道如何实现：我想在按钮旁边的输入字段中显示每种产品的数量。问题是我需要像这样在v模型中选择产品：

<div v-for="product in products" :key="product.id">
  <input v-model="order.products.find((orderProduct)=>{
    return product.id === orderProduct.id
  }).quantity" />
</div>

将产品添加到“订单”对象中之后，数量值0将显示在输入字段中，因此DOM已更新。但是当数量变化时，DOM中没有任何变化。但是，数量在vuex商店中确实发生了变化。

有没有办法解决这个问题？我尝试使用：value而不是v-model，但是存在相同的问题。

Answer 1

您应该使用this.$set使更改生效：

increaseQuantity(state, product){
  let index= state.order.products.findIndex((orderProduct)=>{
    return product.id === orderProduct.id
  })
state.order.products.quantity++;
this.$set(state.order.products,index,state.order.products[index])

}

Answer 2

您似乎以非反应方式对商店进行了突变；这意味着 Vue 不会跟踪您的更改，因此DOM不会更新。

我在以下代码片段中对您的代码做了一些修改：

const store = new Vuex.Store({
  state: {
    products: [
      {
        id: 1,
        quantity: 0
      },
      {
        id: 2,
        quantity: 0
      }
    ]
  },
  mutations: {
    ADD_PRODUCT(state, { id: productId, amount }) {
      const product = state.products.find(({ id }) => id === productId)
      if (product) {
        if (!product.hasOwnProperty('order')) {
          // this is the way to set data in a reactive-way
          Vue.set(product, 'order', true)
        } else {
          product.quantity = Number(amount)
        }
      }
    }
  },
  actions: {
    addProduct({ commit }, data) {
      commit('ADD_PRODUCT', data)
    }
  },
  getters: {
    getProducts: ({ products }) => products,
    getOrdered: ({ products }) => {
      return products.filter(product => {
        return product.hasOwnProperty('order') ? product : false
      })
    }
  }
})

Vue.component('Product', {
  props: ['product'],
  computed: {
    buttonText() {
      if (!this.product.order) {
        return 'ADD TO ORDER'
      } else {
        return 'SET ORDERED QUANTITY'
      }
    }
  },
  data() {
    return {
      amount: 0
    }
  },
  template: `
    <div>Product: {{ product.id }}, {{ product.quantity }}
      <button @click="addToOrder(product.id, amount)">{{ buttonText }}</button>
      <input
        v-if="product.order"
        type="number"
        v-model="amount"
        min="0"
        @input="addToOrder(product.id, amount)"
      >
    </div>`,
  methods: {
    addToOrder(id, amount) {
      this.$store.dispatch('addProduct', { id, amount })
    }
  }
})

Vue.component('Ordered', {
  props: ['product'],
  template: `
    <div>
      Product {{ product.id }} quantity: {{ product.quantity }}
    </div>
  `
})

new Vue({
  el: '#app',
  store,
  computed: {
    products() {
      return this.$store.getters.getProducts
    },
    ordered() {
      return this.$store.getters.getOrdered
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>
<div id="app">
  <div>
    <h3>PRODUCT LIST</h3>
    <product
      v-for="product in products"
      :key="product.id"
      :product="product"
    />
  </div>
  <hr />
  <h3>ORDERED LIST</h3>
  <ordered
    v-for="product in ordered"
    :key="`ordered-${ product.id }`"
    :product="product"
  />
</div>

这个想法是，我只更改产品的order属性以跟踪完整订单是什么。我还创建了一个getter来过滤订购的产品（因此，如果在某些时候只需要这些产品，我就称其为getter）。

这是一种简单的方法：

您只需使用输入字段即可设置订购量
所有产品只有一个阵列
产品跟踪自己的状态（订购的属性和金额）

有关 Vue 反应性的更多信息：https://vuejs.org/v2/guide/reactivity.html

Vue.js-通过在v模型中传递参数来更改嵌套属性

2 个答案: