Vue: 配列モデルのチェックボックス

作成日 2015年07月11日  ·  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>

最も参考になるコメント

あなたは正確に何をしたいですか?
チェックボックスとそのチェック状態のリストである場合は、言語を文字列ではなくオブジェクトとして保持できます。

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

全てのコメント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/

ユースケースは、チェックボックスを次のような方法で使用することだと思います。
複数の選択肢を選択する機能を備えたselectを使用します。 ある種
「該当するものをすべてチェックする」シナリオでは、チェック可能ファイルはアレイから取得されます
可能性の。
2015年7月12日午前9時43分、「rmp135」 [email protected]は次のように書いています。

あなたは正確に何をしたいですか?
チェックボックスとそのチェック状態のリストである場合は、
文字列ではなくオブジェクトとしての言語。





次に、フィルター/マップを使用して、選択した名前を取得できます
言語。

これがそれを示すjsfiddleです。 http://jsfiddle.net/rmp135/v9vx9qyd/


このメールに直接返信するか、GitHubで表示してください
https://github.com/yyx990803/vue/issues/1037#issuecomment-120721497

ここの古い例: http

コアリポジトリではなく、vuejs / Discussionでこのような質問を開いてください。

このページは役に立ちましたか?
0 / 5 - 0 評価