Menu
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://vuejs.org/v2/guide/forms.html
436
It provides two-way data binding by binding the input text element and the value binded to a variable assigned.
v-bind is a one-way binding. v-model is used for binding form elements like inputs, radio buttons, textarea, checkboxes. It is used for binding data, attributes, expressions, class, styles. V-model is input value sensitive.
Value Bindings We can use v-bind to achieve that. In addition, using v-bind allows us to bind the input value to non-string values.
lazy. By default, v-model syncs with the state of the Vue instance (data properties) on every input event - which means every single time the value of our input changes. The . lazy modifier changes our v-model so it only syncs after change events. The change event is triggered when a change is commited.
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"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
