Quería obtener los valores de las casillas de verificación y almacenarlos en una matriz usando v-model, la primera vez que alterno una verificación, no se registra, pero cuando verifico una segunda y presiono enviar los registros del segundo valor, otro problema es que cuando Intento seleccionar varias casillas de verificación, solo registra la casilla marcada recientemente después de activar la función handleClick. También probé el registro de consola filter.filtProv y solo registra lo recientemente verificado.
//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>Puede lograrlo agregando un parámetro marcado en sus objetos de lista de providerList .
Por ejemplo :
{ value: string, checked: boolean } Y luego, al final, al enviar, puede filtrar los objetos checked de la matriz.
Demostración de trabajo:
new Vue({ el: '#app', data: { providerList: [{ value: 'first checkbox', checked: false }, { value: 'Second checkbox', checked: false }, { value: 'Third checkbox', checked: false }, { value: 'Fourth checkbox', checked: false }] }, methods: { submitForm() { const result = this.providerList.filter((obj) => obj.checked).map((obj) => obj.value); console.log(result); } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div id="checkboxes" v-for="(provider, index) in providerList" v-bind:key="index" class="m-2"> <input class="mx-1" type="checkbox" :value="provider.value" v-model="provider.checked"/> <label>{{provider.value}}</label> </div><br> <button @click="submitForm()">Submit!</button> </div>