Vue.js同class的div复用v-model致输入同步问题求助

问题根源很明确：你所有循环生成的输入框都绑定了同一个itemCount变量，所有输入框共享同一个响应式数据，自然会同步变化。下面给你两种靠谱的解决方法：

方法一：给每个商品项添加独立的数量属性 #

这种方式最直观，直接给每个商品对象加一个count属性，让输入框绑定到各自的count上：

修改后的HTML代码 #

<div class="mainScreenSellProduct">
  <div class="mainScreenSellProductMain" v-for="item in coinShopItem" :key="item.id" v-if="coinVisible">
    <div class="mainScreenSellProductDesign">
      <img :src="item.url" alt="No Image"/>
      <div class="mainScreenSellProductDesignColumn">
        <span class="mainScreenSellProductDesignColumnText">{{item.name}}</span>
        <span class="mainScreenSellProductDesignColumnSubText">하이브 코인 - {{item.price.toLocaleString()}}개</span>
      </div>
      <form v-on:submit="onSubmitForm($event, item)">
        <!-- 绑定到当前item的count属性 -->
        <input type="number" v-model="item.count" class="inputTag" placeholder="수량">
        <input type="submit" value="구매하기" class="inputSumbit">
      </form>
    </div>
  </div>
</div>        

修改后的JS代码 #

首先要确保每个商品项都有count属性，你可以在获取coinShopItem数据的时候初始化：

// 假设你是从接口获取数据，在拿到数据后处理
fetchCoinShopItems() {
  // 模拟接口请求
  axios.get('/api/coin-shop-items').then(res => {
    // 给每个item添加count默认值0
    this.coinShopItem = res.data.map(item => ({
      ...item,
      count: 0
    }))
  })
},
onSubmitForm: function(e, item) {
  e.preventDefault();
  // 直接获取当前商品的数量
  const itemCount = item.count;
  console.log(`구매 수량: ${itemCount}, 상품명: ${item.name}`);
  // 这里写你的提交逻辑
},    

方法二：用单独对象存储每个商品的数量 #

如果不想修改原商品对象，可以在data里定义一个专门存储数量的对象，用商品id作为键：

修改后的HTML代码 #

<div class="mainScreenSellProduct">
  <div class="mainScreenSellProductMain" v-for="item in coinShopItem" :key="item.id" v-if="coinVisible">
    <div class="mainScreenSellProductDesign">
      <img :src="item.url" alt="No Image"/>
      <div class="mainScreenSellProductDesignColumn">
        <span class="mainScreenSellProductDesignColumnText">{{item.name}}</span>
        <span class="mainScreenSellProductDesignColumnSubText">하이브 코인 - {{item.price.toLocaleString()}}개</span>
      </div>
      <form v-on:submit="onSubmitForm($event, item)">
        <!-- 绑定到itemCounts对象中对应id的属性 -->
        <input type="number" v-model="itemCounts[item.id]" class="inputTag" placeholder="수량">
        <input type="submit" value="구매하기" class="inputSumbit">
      </form>
    </div>
  </div>
</div>        

修改后的JS代码 #

data() {
  return {
    coinShopItem: [],
    coinVisible: true,
    // 初始化空对象存储数量
    itemCounts: {}
  }
},
fetchCoinShopItems() {
  axios.get('/api/coin-shop-items').then(res => {
    this.coinShopItem = res.data;
    // 给每个商品id初始化数量为0
    res.data.forEach(item => {
      this.$set(this.itemCounts, item.id, 0);
    })
  })
},
onSubmitForm: function(e, item) {
  e.preventDefault();
  // 通过id获取对应数量
  const itemCount = this.itemCounts[item.id];
  console.log(`구매 수량: ${itemCount}, 상품명: ${item.name}`);
  // 提交逻辑
},    

为什么ref没用？ #

循环里用ref会生成一个DOM元素数组，你如果直接用同一个ref名，拿到的是所有输入框的集合，手动去管理每个输入框的值反而麻烦，不符合Vue响应式的设计思路，所以还是用上面两种数据绑定的方式更合适。

内容的提问来源于stack exchange，提问作者Joonyoung