Vue: caixas de seleção com modelo de matriz

Criado em 11 jul. 2015 · 3Comentários · Fonte: vuejs/vue

Como faço algo assim funcionar ?:

<script>
new Vue({
  data: {
    languages: ['english', 'japanese', 'chinese']
    myLanguages: ['english', 'chinese']
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language }}'
    v-model='myLanguages'>
</span>

Fonte

robertleeplummerjr

Comentários muito úteis

O que exatamente você quer que aconteça?
Se for uma lista de caixas de seleção e seus estados marcados, você pode manter os idiomas como um objeto em vez de uma string.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

Você pode então usar um filtro / mapa para recuperar os nomes dos idiomas selecionados.

Aqui está um jsfiddle demonstrando isso. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 em 12 jul. 2015

👍3

Todos 3 comentários

O que exatamente você quer que aconteça?
Se for uma lista de caixas de seleção e seus estados marcados, você pode manter os idiomas como um objeto em vez de uma string.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

Você pode então usar um filtro / mapa para recuperar os nomes dos idiomas selecionados.

Aqui está um jsfiddle demonstrando isso. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 em 12 jul. 2015

👍3

Acho que o caso de uso é usar as caixas de seleção de maneira semelhante
você usa uma seleção com a capacidade de selecionar várias seleções. Tipo de
um cenário de "verificar todos os que se aplicam", em que os itens de verificação vêm de uma matriz
de possibilidades.
Em 12 de julho de 2015, às 9h43, "rmp135" [email protected] escreveu:

O que exatamente você quer que aconteça?
Se for uma lista de caixas de seleção e seus estados marcados, você pode manter o
linguagens como um objeto em vez de uma string.

Você pode então usar um filtro / mapa para recuperar os nomes dos selecionados
línguas.
Aqui está um jsfiddle demonstrando isso. http://jsfiddle.net/rmp135/v9vx9qyd/
-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497.