Vue: флажки с моделью массива

Созданный на 11 июл. 2015 · 3Комментарии · Источник: vuejs/vue

Как мне заставить что-то подобное работать ?:

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

Источник

robertleeplummerjr

Самый полезный комментарий

Что именно вы хотите?
Если это список флажков и их отмеченное состояние, вы можете хранить языки как объект, а не строку.

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

Затем вы можете использовать фильтр / карту для получения названий выбранных языков.

Вот jsfiddle, демонстрирующий это. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 12 июл. 2015

👍3

Все 3 Комментарий

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

Затем вы можете использовать фильтр / карту для получения названий выбранных языков.

Вот jsfiddle, демонстрирующий это. http://jsfiddle.net/rmp135/v9vx9qyd/

rmp135 12 июл. 2015

👍3

Я предполагаю, что вариант использования - использовать флажки таким же образом, что и
вы используете выбор с возможностью выбора нескольких вариантов. Вроде, как бы, что-то вроде
сценарий «проверьте все, что применимо», где проверяемые элементы берутся из массива
возможностей.
12 июля 2015 г. в 9:43 "rmp135" [email protected] написал:

Что именно вы хотите?
Если это список флажков и их отмеченное состояние, вы можете удерживать
языки как объект, а не строка.

Затем вы можете использовать фильтр / карту для получения имен выбранных
языков.
Вот jsfiddle, демонстрирующий это. http://jsfiddle.net/rmp135/v9vx9qyd/
-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497.