我尝试在相同的div
classname
中使用相同的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但是不起作用。有没有办法解决这个问题?
1条答案
按热度按时间0md85ypi1#
很明显,如果对循环中的每个项使用相同的
v-model
,那么每个项都可以修改相同的v-model
属性。实现
v-model
循环概念的正确方法是,每个项目都应该有自己的v-model
属性(在您的例子中是itemCount
),并且在提交表单时,在submit方法中传递相应项目的itemCount
。下面是一个用例演示,我在submit方法中只传递当前循环项的
itemCount
属性。