在相同div类名中使用相同v模型的Vue.js

y1aodyip  于 2023-02-24  发布在  Vue.js
关注(0)|答案(1)|浏览(199)

我尝试在相同的divclassname中使用相同的v-model,问题是如果我使用相同的v-model,即使我键入一个输入,所有输入值也会像我的图像一样变化。

这是我的HTML代码

<div class="mainScreenSellProduct">
  <div class="mainScreenSellProductMain" v-for="items in coinShopItem" :key="items.id" v-if="coinVisible">
    <div class="mainScreenSellProductDesign">
      <img :src="items.url" alt="No Image"/>
      <div class="mainScreenSellProductDesignColumn">
        <span class="mainScreenSellProductDesignColumnText">{{items.name}}</span>
        <span class="mainScreenSellProductDesignColumnSubText">하이브 코인 - {{items.price.toLocaleString()}}개</span>
      </div>
      <form v-on:submit="onSubmitForm">
        <input type="number" v-model="itemCount" class="inputTag" placeholder="수량">
        <input type="submit" value="구매하기" class="inputSumbit">
      </form>
    </div>
  </div>
</div>

这是我的JS代码

onSubmitForm: function(e) {
  e.preventDefault();
  const itemCount = this.itemCount;
  this.text = `${message}`;
  console.log("inputValue" + message);
},

我试过使用ref但是不起作用。有没有办法解决这个问题?

0md85ypi

0md85ypi1#

很明显,如果对循环中的每个项使用相同的v-model,那么每个项都可以修改相同的v-model属性。

实现v-model循环概念的正确方法是,每个项目都应该有自己的v-model属性(在您的例子中是itemCount),并且在提交表单时,在submit方法中传递相应项目的itemCount

下面是一个用例演示,我在submit方法中只传递当前循环项的itemCount属性。

new Vue({
  el: "#app",
  data() {
    return {
      coinVisible: true,
      coinShopItem: [{
          id: 1,
          name: "Item 1",
          url: "https://picsum.photos/200/300",
          price: 123,
          itemCount: 10,
        },
        {
          id: 2,
          name: "Item 1",
          url: "https://picsum.photos/200/300",
          price: 123,
          itemCount: 20
        }
      ]
    }
  },
  methods: {
    onSubmitForm: function(e, payload) {
      e.preventDefault();
      console.log('Item Count- ', payload);
    },
  }
})
#app {
  height: 500px;
}
img {
  width: 20px;
  height: 20px;
}
.content {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="mainScreenSellProduct" id="app">
  <div class="mainScreenSellProductMain" v-for="items in coinShopItem" :key="items.id" v-if="coinVisible">
    <div class="mainScreenSellProductDesign">
      <img :src="items.url" alt="No Image" class="content"/>
      <div class="mainScreenSellProductDesignColumn content">
        <span class="mainScreenSellProductDesignColumnText">{{items.name}}</span>
        <span class="mainScreenSellProductDesignColumnSubText">하이브 코인 - {{items.price.toLocaleString()}}개</span>
      </div>
      <form v-on:submit="onSubmitForm($event, items.itemCount)">
        <input type="number" v-model="items.itemCount" class="inputTag" placeholder="수량">
        <input type="submit" value="구매하기" class="inputSumbit">
      </form>
    </div>
  </div>
</div>

相关问题