Vue: casillas de verificación con modelo de matriz

Creado en 11 jul. 2015 · 3Comentarios · Fuente: vuejs/vue

¿Cómo hago para que algo como esto funcione ?:

<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>

Fuente

robertleeplummerjr

Comentario más útil

¿Qué es exactamente lo que quieres que suceda?
Si se trata de una lista de casillas de verificación y su estado marcado, puede mantener los idiomas como un objeto en lugar de una cadena.

<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>

A continuación, puede utilizar un filtro / mapa para recuperar los nombres de los idiomas seleccionados.

Aquí hay un jsfiddle que lo demuestra. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 en 12 jul. 2015

👍3

Todos 3 comentarios

¿Qué es exactamente lo que quieres que suceda?
Si se trata de una lista de casillas de verificación y su estado marcado, puede mantener los idiomas como un objeto en lugar de una cadena.

<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>

A continuación, puede utilizar un filtro / mapa para recuperar los nombres de los idiomas seleccionados.

Aquí hay un jsfiddle que lo demuestra. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 en 12 jul. 2015

👍3

Supongo que el caso de uso es usar las casillas de verificación de manera similar que
su uso una selección con la capacidad de seleccionar múltiples selecciones. Algo así como
un escenario de "marque todo lo que corresponda", donde los comprobables provienen de una matriz
de posibilidades.
El 12 de julio de 2015 a las 9:43 a. M., "Rmp135" [email protected] escribió:

¿Qué es exactamente lo que quieres que suceda?
Si es una lista de casillas de verificación y su estado marcado, puede mantener el
lenguajes como un objeto en lugar de una cadena.

A continuación, puede utilizar un filtro / mapa para recuperar los nombres de los seleccionados
Idiomas.
Aquí hay un jsfiddle que lo demuestra. http://jsfiddle.net/rmp135/v9vx9qyd/
-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497.