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>

资料来源

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 于 2015-07-12

👍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 于 2015-07-12

👍3

我想用例是以类似的方式使用复选框
您使用具有选择多个选项的能力的选择。有点
“检查所有适用的”场景，其中可检查项来自数组
的可能性。
2015 年 7 月 12 日上午 9:43，“rmp135”通知@github.com 写道：

你到底想要发生什么？
如果它是一个复选框列表及其选中状态，您可以按住
语言作为对象而不是字符串。

然后，您可以使用过滤器/地图来检索选定的名称
语言。
这是一个演示它的jsfiddle。 http://jsfiddle.net/rmp135/v9vx9qyd/
—
直接回复此邮件或在 GitHub 上查看
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497。

robertleeplummerjr 于 2015-07-12

这里的旧例子： http :

请在 vuejs/Discussion 而非核心 repo 中提出这样的问题。

yyx990803 于 2015-07-13

此页面是否有帮助？

0 / 5 - 0 等级

Vue: 带有数组模型的复选框

最有用的评论

所有3条评论

相关问题