Vue.js

Question

我有一个用 v-for 显示的数组 'products'。对于每个产品，都有一个按钮可以将产品添加到对象 'order'。对象 'order' 看起来像

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

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

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

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

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

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

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

将产品添加到 'order' 对象的那一刻，输入字段中显示的数量值为 0，因此 DOM 已更新。但是当数量改变时 DOM 没有任何变化。但是，vuex store 中的数量确实发生了变化。

有办法解决吗？我尝试使用 :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

您似乎以 non-reactive 的方式改变了商店；这意味着 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-model 中传递参数来更改嵌套属性

Vue.js - change nested property by passing a parameter in v-model

vuejs2

vue-component

vuex

v-model