My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the second value get captured. Additionally, when attempting to select multiple checkboxes, only the last checked box gets logged after triggering the handleClick function. I also attempted console logging filter.filtProv and noticed that it only logs the most recently checked box.
//vue app
var filter = {
filtProv: reactive([]) as String[]
}
var temp: any = []
let handleClick = () =>{
temp.push(filter.filtProv)
console.log(temp)
}
//template
<div id="checkboxes" v-for="provider in providerList" v-bind:key="provider" class="m-2">
<input class="mx-1" type="checkbox" :value="provider" v-model="filter.filtProv"/>
<label>{{provider}}</label>
</div>