vue: считать и ставить флажки
Что я хочу сделать с vue:
- Подсчитайте флажки
- Установите все флажки для флажка (или снимите все флажки)
Это очень упрощенная модель. Настоящий сайт содержит следующие ограничения:
- Количество флажков меняется.
- Значения всегда разные.
- Я не хочу помещать все входные атрибуты в раздел данных Vue
Следующий код позволяет подсчитать количество отмеченных флажков.
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc" value=1 v-model="cch">
<input type="checkbox" name="abc" value=2 v-model="cch">
<br/>
Count: {{cch.length}}
</div>
<script>
new Vue({
el: '#app',
data: {
cch: [],
},
})
</script>
</body>
</html>
Следующий код проверяет все флажки (и, конечно, снимает флажки, если chk=false):
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc" value=1 :checked="chk">
<input type="checkbox" name="abc" value=2 :checked="chk">
<br/>
Checked: {{chk}}
</div>
<script>
new Vue({
el: '#app',
data: {
chk: true
},
})
</script>
</body>
</html>
Кажется, что невозможно использовать: флажок и v-модель в одном теге ввода. Что я могу сделать?
Я добавил кнопку, чтобы установить все флажки, и я изменил имена. Проблемы остаются: счет работает хорошо, но кнопка "все" не дает никакого эффекта.
<html>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" name="abc1" value=1 v-model="cch" :checked="chk">
<input type="checkbox" name="abc2" value=2 v-model="cch" :checked="chk">
<br/>
Count: {{cch.length}}
<br/>
<input type="button" @click="chk=!chk" value="all">
</div>
<script>
new Vue({
el: '#app',
data: {
cch: [],
chk: true
},
})
</script>
</body>
</html>
1 ответ
Вам нужно будет установить уникальный атрибут имени для каждого флажка. Таким образом, они корректно работают с v-моделью.