Vue: kotak centang dengan model array

Dibuat pada 11 Jul 2015 · 3Komentar · Sumber: vuejs/vue

Bagaimana saya membuat sesuatu seperti ini berfungsi?:

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

Sumber

robertleeplummerjr

Komentar yang paling membantu

Apa sebenarnya yang Anda inginkan terjadi?
Jika itu adalah daftar kotak centang dan statusnya yang dicentang, Anda dapat menahan bahasa sebagai objek daripada 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>

Anda kemudian dapat menggunakan filter/peta untuk mengambil nama bahasa yang dipilih.

Inilah jsfiddle yang menunjukkannya. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 pada 12 Jul 2015

👍3

Semua 3 komentar

Apa sebenarnya yang Anda inginkan terjadi?
Jika itu adalah daftar kotak centang dan statusnya yang dicentang, Anda dapat menahan bahasa sebagai objek daripada 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>

Anda kemudian dapat menggunakan filter/peta untuk mengambil nama bahasa yang dipilih.

Inilah jsfiddle yang menunjukkannya. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 pada 12 Jul 2015

👍3

Saya kira kasus penggunaannya adalah menggunakan kotak centang dengan cara yang sama seperti
Anda menggunakan pilih dengan kemampuan untuk memilih beberapa pilihan. semacam
skenario "periksa semua yang berlaku", di mana checkable berasal dari array
dari kemungkinan.
Pada 12 Juli 2015 09:43, "rmp135" [email protected] menulis:

Apa sebenarnya yang Anda inginkan terjadi?
Jika itu adalah daftar kotak centang dan statusnya yang dicentang, Anda dapat menahan tombol
bahasa sebagai objek daripada string.

Anda kemudian dapat menggunakan filter/peta untuk mengambil nama-nama yang dipilih
bahasa.
Inilah jsfiddle yang menunjukkannya. http://jsfiddle.net/rmp135/v9vx9qyd/
—
Balas email ini secara langsung atau lihat di GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497.