vuejs modelo v, casilla de verificación múltiple y propiedad calculada
Estoy tratando de usar varias casillas de verificación en un solo componente de archivo. Y necesito una propiedad calculada, pero tengo boolean newVal en lugar de array en mi setter. Aquí está mi código:
var demo = new Vue({
el: '#demo',
data: {
_checkedNames: []
},
computed: {
checkedNames: {
get: function () {
return this._checkedNames;
},
set: function (newVal) {
console.log(newVal); //with computed we have true/false value instead of array
this._checkedNames = newVal;
}
}
}
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="demo">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
Entonces, verá un valor booleano en la consola.
Actualización 1. Explicación detallada del casoEstoy usando el código heredado del modelo, que se pasa como un parámetro al componente vue. Y necesito vincular el marcado de componentes a la propiedad del modelo (_checkedNames
en el código anterior simula esta propiedad del modelo). Esta propiedad declarada mediante getter / setter (a veces solo getter). Y quiero usar esa propiedad env-model
construcción. Este caso no me funciona. Supongo que vuejs no puede envolverlo correctamente. Y estoy buscando una solución (o una solución alternativa) que tenga en cuenta las restricciones mencionadas.
Aquí está la misma pregunta en vue forum:https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544