Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

checkboxes with array model #1037

Closed
robertleeplummerjr opened this issue Jul 11, 2015 · 3 comments
Closed

checkboxes with array model #1037

robertleeplummerjr opened this issue Jul 11, 2015 · 3 comments

Comments

@robertleeplummerjr
Copy link

How do I get something like this to work?:

<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>
@rmp135
Copy link

rmp135 commented Jul 12, 2015

What exactly are you wanting to happen?
If it's a list of checkboxes and their checked state, you could hold the languages as an object rather than a 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>

You can then use a filter/map to retrieve the names of the selected languages.

Here's a jsfiddle demonstrating it. http://jsfiddle.net/rmp135/v9vx9qyd/

@robertleeplummerjr
Copy link
Author

I guess the use case is to use the check boxes in a similar manner that
your use a select with the ability to select multiple selections. Sort of
a "check all that apply" scenario, where the checkables come from an array
of possibilities.
On Jul 12, 2015 9:43 AM, "rmp135" notifications@github.com wrote:

What exactly are you wanting to happen?
If it's a list of checkboxes and their checked state, you could hold the
languages as an object rather than a string.

<script>new Vue({ data: { languages: [ {name: 'english', checked:true}, {name: 'japanese', checked:false}, {name: 'chinese', checked:true} ] }});</script>

You can then use a filter/map to retrieve the names of the selected
languages.

Here's a jsfiddle demonstrating it. http://jsfiddle.net/rmp135/v9vx9qyd/


Reply to this email directly or view it on GitHub
https://github.com/yyx990803/vue/issues/1037#issuecomment-120721497.

@yyx990803
Copy link
Member

Old example here: http://jsfiddle.net/yyx990803/1onz2ho7/1/

Please open questions like this at vuejs/Discussion instead of the core repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants