6

I want to put the value of every item into array selectedParks. The problem is, the value is always set to string "item", and not the value of the actual item (it's a Park Object).

Code:

<ul class="list-group no-bullets">
    <li class="list-group-item" v-for="item in parks">
        <label><input type="checkbox" value="item" v-model="selectedParks"/> {{item.name}}</label>
    </li>
</ul>
<span>Checked: {{selectedParks}}</span>

I know that the actual item is bound correctly, because {{item.name}} shows the correct value.

Docs (multiple checkboxes bound to the same array): https://v2.vuejs.org/v2/guide/forms.html

Improve this question
1
  • Could you describe the Park Object data structure? Commented Oct 26, 2017 at 11:42

1 Answer 1

Reset to default
14

That because value is being assessed as a string, you need to use v-bind to set it as an object:

<input type="checkbox" v-bind:value="item" v-model="selectedParks"/>

or the colon shorthand:

<input type="checkbox" :value="item" v-model="selectedParks"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

If you look closely, the item is an object. I think you need something like: :value="item.selected"
@Alfa, looks like he wants to bind the entire object to me, which is fine: jsfiddle.net/7hxL3tcs
@alfa why bind a property of an object when you can bind the whole object?
@Bert park object has name property. I think it would not work if you bind the whole object.
Aaah, I see, we have different approach. Here's mine jsfiddle.net/ob0ohfL6
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.