Digamos que tengo un componente de casilla de verificación (entrada) personalizado y planeo usarlo con v-model en el componente que se supone que lo usará.

Lo que estoy haciendo es, para admitir varias casillas de verificación, creo un estado de matriz y, al marcar/desmarcar, agrego/elimino el valor de la casilla de verificación de la matriz.

Es el mejor enfoque. Estoy usando Vue2 .

 // CheckBox.vue <script> export default { model: { // Customising the option for model prop: "checked", // Array of checked values event: "check" // Firing this event with new array of checked values }, props: ["name", "label", "value", "checked"], emits: ["check"] }; </script> <template> <label :for="`input-${name}`"> {{ label }} <input :id="`input-${name}`" :value="value" type="checkbox" :checked="checked.includes(value)" @change="$emit('check', $event.target.checked ? [...checked, value] : checked.filter((val) => val !== value))" /> // I'm just appending/removing value from the array state. Is this the best approach? </label> </template>

 // SomeComponent.vue <script> import CheckBox from "../atoms/checkbox.vue"; export default { data: () => ({ elements: [1, 2, 3, 4, 5, 6, 7, 8, 9], checked: [], // Storing the checked values here }), watch: { checked: function (newSelected) { console.log(newSelected); } }, components: { CheckBox } } </script> <template> <ul> <li v-for="num in elements"> <CheckBox :name="num" :label="num" :value="num" v-model="checked" /> </li> </ul> </template>