javascript - 有没有办法覆盖输入类型数字的递增/递减处理？

Question

我想做的是操纵内置的 html 输入按钮来增加和减少数字。如果有这样做的“vue-way”，那当然是首选。

首先，我正在开发一个我为学习 Vue 而创建的小型 vue-app，我现在得到的是一个 Vuex 商店，其中包含购物车的状态和方法。我已将图像中看到的值 item.itemCount 绑定(bind)到输入字段的值。但我希望递增/递减按钮以正确的方式实际更新 vuex 状态。

            <input
              class="slim"
              type="number"
              v-model.number="item.itemCount"
            />

我知道我可以停止使用输入字段，并创建我自己的“计数 View ”+ 两个按钮，但我很好奇是否可以做这样的事情。

更新购物车.vue

<template>
  <div class="sliding-panel">
    <span class="header">Shopping Cart</span>
    <table>
      <thead>
        <th>Item Name</th>
        <th>Count</th>
        <th>Remove</th>
      </thead>

      <transition-group name="fade">
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>
            <input class="slim" type="number" v-model.number="item.itemCount" />
          </td>
          <td><button @click="removeProductFromCart(item)">Remove</button></td>
        </tr>
      </transition-group>

      <tr>
        Current sum:
        {{
          sum
        }}
        of
        {{
          count
        }}
        products.
      </tr>
    </table>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: mapState({
    items: (state) => state.cart.items,
    count: (state) => state.cart.count,
    sum: (state) => state.cart.sum,
  }),
  methods: mapActions("cart", ["removeProductFromCart"]),
};
</script>


<style>
</style>

Answer 1

首先，您不需要以任何方式“覆盖递增/递减处理”。你有 <input>所以你需要处理所有用户输入变化的值 - 无论是 inc/dec 按钮还是用户直接输入值......

更新 Vuex 状态的正确方法是使用突变。所以即使在技术上可以绑定(bind) v-model对于存储在 Vuex 中的对象的某些属性(就像你所做的那样)，这是不正确的“Vuex 方式”

如果只有一个值，你可以像这样使用计算属性:

computed: {
  myValue: {
    get() { return this.$store.state.myValue },
    set(value) { this.$store.commit('changemyvalue', value )} // "changemyvalue" is defined mutation in the store
  }
}

...并将其绑定(bind)到 input

<input type="number" v-model="myValue" />

但是因为您正在处理值数组，所以跳过 v-model 更为实用完全-到底v-model只是 :value="myValue" @input="myValue = $event.target.value" 的语法糖

在这种情况下

<input type="number" :value="item.itemCount" min="1" @input="setItemCount({ id: item.id, count: $event.target.value})"/>

...哪里setItemCount是为了改变购物车中的商品数量而创建的突变

工作示例:

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Socks', itemCount: 2},
      { id: 2, name: 'Trousers', itemCount: 1}
    ]
  },  
  mutations: {
    setItemCount(state, { id, count }) {      
      const index = state.items.findIndex((item) => item.id === id);
      if(index > -1) {
        const item = state.items[index]
        item.itemCount = count;
        console.log(`Changing count of item '${item.name}' to ${count}`)
      }
    }
  }
})
const app = new Vue({
  store,
  template: `
  <div>
    <span>Shopping Cart</span>
    <table>
      <thead>
        <th>Item Name</th>
        <th>Count</th>
        <th>Remove</th>
      </thead>

      <transition-group name="fade">
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>
            <input type="number" :value="item.itemCount" min="1" @input="setItemCount({ id: item.id, count: $event.target.value})"/>
          </td>
          <td><button>Remove</button></td>
        </tr>
      </transition-group>
    </table>
  </div>
  `,
  computed: {
    ...Vuex.mapState({
      items: (state) => state.items,
    })
  },
  methods: {
    ...Vuex.mapMutations(['setItemCount'])
  }
})
app.$mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.5.1/vuex.min.js"></script>

<div id="app"> </div>