输入中的真/假(vuejs),可能没有 v-model
Posted
技术标签:
【中文标题】输入中的真/假(vuejs),可能没有 v-model【英文标题】:true / false in input (vuejs), probably without v-model 【发布时间】:2022-01-17 13:22:34 【问题描述】:我有一个包含许多复选框的数组。
<li v-for='item in resultQuery' :key='item.id'>
<label class='custom-checkbox'>
<input type='checkbox' :value='item.id' v-model='checkBrands'>
<span @click='loadProducts(item.seoName)> item.title </span>
</label>
</li>
我需要得到真或假(取决于复选框)。如何在不影响 v-model 的情况下做到这一点? (用它来传输选中复选框的数组)。
需要触发特定的突变
.then((response) =>
if(true)
this.$store.commit(
'showFilteredList',
response.data.items
);
else
this.$store.commit(
'deleteCheckboxItems',
response.data.items
);
);
【问题讨论】:
【参考方案1】:您可以在复选框上使用@change
。
示例:https://codepen.io/koei5113/pen/ZEXLLgL
<input type='checkbox' :value='item.id' v-model='checkBrands' @change="changeEvent">
methods:
...,
changeEvent($event)
console.log($event.target.checked);
在此示例中,您可以看到您的 v-model
仍在工作,您仍然可以通过更改事件检查复选框状态。
【讨论】:
【参考方案2】:v-model
忽略输入中的:value
。你需要使用:checked
和@change
例如,当您发出更改事件时,请使用您的函数。
<input type="checkbox" :checked="value" @change="changeArrayNotValue" />
【讨论】:
以上是关于输入中的真/假(vuejs),可能没有 v-model的主要内容,如果未能解决你的问题,请参考以下文章