I want to apply this code on vuejs I replaced onclick by @click but it doesn't work! ps: I'm beginner on vuejs
function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('check')
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
}
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
A basic approach to the question you stated:
new Vue({
el: "#app",
data() {
return {
checkboxes: [{
checked: false
},
{
checked: false
},
{
checked: false
},
{
checked: false
},
]
}
},
methods: {
onChange(cb) {
this.checkboxes = this.checkboxes.map(checkbox => ({ checked: cb == checkbox }))
},
},
template: `
<div>
<div
v-for="(checkbox, i) in checkboxes"
:key="i"
>
<input
type="checkbox"
:checked="checkbox.checked"
@change="() => onChange(checkbox)"
/>
{{ checkbox.checked }}
</div>
</div>
`
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>