vuejs v-model, caixa de seleção múltipla e propriedade computada
Estou tentando usar várias caixas de seleção no componente de arquivo único. E preciso calcular a propriedade, mas tenho newVal booleano em vez de array no meu setter. Aqui está o meu 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>
Então, você verá um valor booleano no console.
Atualização 1. Explicação detalhada do casoEstou usando o código legado do modelo, que está sendo passado como parâmetro para o componente vue. E preciso vincular a marcação do componente à propriedade do modelo (_checkedNames
no código acima simula essa propriedade de modelo). Esta propriedade declarada via getter / setter (às vezes apenas getter). E eu quero usar essa propriedade emv-model
construção. Este caso não funciona para mim. Eu acho que vuejs não pode envolvê-lo corretamente. E estou buscando uma solução (ou solução alternativa) que leve em consideração as restrições mencionadas.
Aqui está a mesma pergunta no fórum vue:https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544