What I want to do with vue:
- Count checked checkboxes
- Set all checkboxes to checked (or uncheck all)
This is a very simplified model. The real website contains the following contraints:
- The number of checkboxes changes.
- The values are always different.
- I do not want to put all the input-attribute into the data-section of Vue
The following code allows to count the number of checked checkboxes.
<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:
</div>
<script>
new Vue({
el: '#app',
data: {
cch: [],
},
})
</script>
</body>
</html>
The following code checks all checkboxes (and, of course, unchecks the checkboxes if 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:
</div>
<script>
new Vue({
el: '#app',
data: {
chk: true
},
})
</script>
</body>
</html>
It seems that it is not possible to use :checked and v-model in the same input-tag. What can I do?
Aucun commentaire:
Enregistrer un commentaire