I have some very simple Vue.js code in a multi-step form. I am trying to store the values temporarily until the user reaches the end of the form.
However, I am getting some errors with a checkbox value binding.
My form looks like the following:
<div v-for="item in items">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" v-model="checkedItems" :value="item.id">
{{ item.text }}
</label>
</div>
And my Vue:
new Vue({
el: '#multistep-form',
data: {
items: [
{id: 0, text: 'Item 1'}
{id: 1, text: 'Item 2'}
{id: 2, text: 'Item 3'}
],
checkedItems: [],
}
});
When I click the items, it is creating empty checkboxes. These get deleted when I uncheck the items as in the attached image.
Anyone know why this is happening and how I can fix it?
You're specifying array as v-model where it should be one of the indices of array. Try the following:
<div v-for="(item, index) in items">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" v-model="checkedItems[index]" :value="item.id">{{ item.text }}
</label>
</div>
Related
I can post an array of objects in Vue, but I'm having trouble posting a simple indexed array. I'm giving streamlined code because I think the answer lies in plain sight for the experienced.
Here's what I've got so far...
<section v-for="(item, index) in items">
<div>
<button #click.prevent="deleteItem(index)">delete</button>
<input type="text" v-model="item[index]" placeholder="enter your item here">
</div>
</section>
<div>
<button #click.prevent="addItem">add item</button>
</div>
The Vue instance data object so far:
data () {
return {
items: ['']
}
},
What works:
The user can add/delete rows on the form.
Vue DevTools shows me an indexed array with empty fields for each row.
Error messages in the JS console:
I would like to see this in the post...
{ "items": ["item1 input value", "item2 input value"] }
Instead I'm only able to get this because Vue won't react to the input changes...
{ "items": ["", ""] }
For comparison, posting an array of objects works like this:
<section v-for="(item, index) in items">
<div>
<button #click.prevent="deleteItem(index)">delete</button>
<input type="text" v-model="item.color" placeholder="enter color here">
<input type="text" v-model="item.price" placeholder="enter price here">
<input type="text" v-model="item.comment" placeholder="enter comment here">
</div>
</section>
<div>
<button #click.prevent="addItem">add item</button>
</div>
The Vue instance data object:
data () {
return {
items: [{ color: '', price: '', comment: '' }]
}
},
I just received the answer in another forum.
It was so silly... item[index] just needs to be items[index].
I am generating a some checkbox dynamically. Now I need to create v-model dynamic.
<div class="form-group input-group">
<label class="form-group-title">DIETARY PREFERENCES</label>
<p>Please mark appropriate boxes if it applies to you and/or your family</p>
<div class="check-group" v-for="v in alldietry" :key="v">
<input type="checkbox" v-model="userinfo.{{#Here will be the value}}" value="" id="Vegetarian">
<label for="Vegetarian">{{v.title}}</label>
</div>
</div>
into the v-model I have try v-model="userinfo.{{xyz}}" its shows error.
You can't use {{ }} interpolation inside attributes.
The v-model value is a javascript expression, so instead of
v-model="userinfo.{{xyz}}"
you can just do
v-model="userinfo[xyz]"
as you would normally do in javascript when accessing a dynamic property of an object.
To bind dynamic object to model, you need to access to key shared by the model value and the set of data used to display your list.
let vm = new Vue({
el: '#app',
data: {
userinfo: {
0: '',
1: ''
}
},
computed: {
alldietry() {
return [
{
id: 0,
title: 'Title'
},
{
id: 1,
title: 'Title'
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="form-group input-group">
<label class="form-group-title">DIETARY PREFERENCES</label>
<p>Please mark appropriate boxes if it applies to you and/or your family</p>
<div class="check-group" v-for="(v, index) in alldietry" :key="index">
<input type="checkbox" v-model="userinfo[v.id]" value="" :id="v.id">
<label :for="v.id">{{v.title}}</label>
</div>
{{ userinfo }}
</div>
I'd like to make default checked on radio buttons inside a v-for loop.
Here is the code:
<ul v-for="p in photos">
<li>
<div>
<div>
<div>
Visibility: {{p.visible}}
</div>
<strong>Visibility setting</strong><br>
<input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'"> All <br>
<input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
<input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'"> No one
</div>
<div><img" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
</div>
</li>
</ul>
I followed this answer.
While I can see Visibility of each item is being printed, the default radio buttons of each photo are not checked as expected.
Here is the photos array which I receive from the server when the component is created:
[
{
"id" : "5bcebb6efeaea3147b7a22f0",
"imgId" : "12710.png",
"visible" : "all"
},
{
"id" : "5bcebbf0feaea3147b7a22f1",
"imgId" : "62818.png",
"visible" : "fav"
},
{
"id" : "5bcec010feaea3147b7a22f2",
"imgId" : "36740.png",
"visible" : "none"
}
],
What is wrong here and how can I fix it?
Don't use :checked:
v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.
If v-model is the same as value it will return true for that checkbox. Your fixed fiddle:
new Vue({
el: '#app',
data: {
photos: [{
"id": "5bcebb6efeaea3147b7a22f0",
"imgId": "12710.png",
"visible": "all"
},
{
"id": "5bcebbf0feaea3147b7a22f1",
"imgId": "62818.png",
"visible": "fav"
},
{
"id": "5bcec010feaea3147b7a22f2",
"imgId": "36740.png",
"visible": "none"
}
],
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul v-for="(p, index) in photos">
<li>
<div>
Visibility: {{p.visible}}
</div>
<strong>Visibility setting</strong><br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="all"> All <br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="fav"> My favorites <br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="none"> No one
</li>
</ul>
</div>
Now each radio group has it's own name, with v-model targeting that group (note the index).
How can i have checked radio button in v-for, if i my v-model is an array?
my data:
data() {
return {
persons: {
name: [],
surname: [],
sex: [],
}
}
}
and my radio:
<template v-for(person, person_index) in persons>
<div class="switch-sex">
<input type="radio" name="sex" :id="'male'+person_index" value="male"
v-model="persons.sex[person_index]">
<label :for="'male' + person_index">M</label>
<input type="radio" name="sex" :id="'female' + person_index"
value="female" v-model="persons.sex[person_index]">
<label :for="'female' + person_index">F</label>
</div>
</template>
I need my first radio ( male) be checked in each person inside v-for
If I don't misunderstood your question and your objective, your doing dynamic forms for multiple persons then try like this
Template
//n and index used for 0-based looping
<div v-for="(n, index) in noOfPersons" :key="index">
Person {{ index + 1 }}
<div class="switch-sex">
<input type="radio" :name="'sex'+(index+1)" value="male" v-model="persons[index].sex">
<label >Male {{index+1}}</label>
</div>
<div>
<input type="radio" :name="'sex'+(index+1)" value="female" v-model="persons[index].sex">
<label >Female {{index+1}} </label>
</div>
</div>
Script (just an example to show its checked)
data() {
return {
noOfPersons: 2,
persons: [
{name: '', surname: '', sex: 'male'},
{name: '', surname: '', sex: 'female'},
]
}
}
For those using Vuetify.js (it's different approach with v-model on the v-radio-group wrapper)
<v-radio-group v-model="persons[index].sex" :mandatory="false">
<v-radio label="Male" :value="1" color="blue"></v-radio>
<v-radio label="Female" :value="0" color="blue"></v-radio>
</v-radio-group>
Here's the Code Pen
NOTE. It is recommended to use binary (0/1) data like 0 for male or 1 for female or other numbers like 1/2 Database Storage / ISO 5218 or dummy variables. Here's explanation
I'm trying to create a form where I have a select list (fetched from API) and user can add items into a seperate array from this list. New array is also rendered via v-for and uses v-model to edit some additional data.
For example I have a list of goods/services defined beforehand which will be rendered into select option block. Now user can select one of these products and add them to a invoice. After adding (pushed to a new array), user must be able to make some additional changes.
<select class="form-control" v-model="selectedServiceId">
<option v-for="service in services" :value="service._id">{{service.name}}</option>
</select>
<button type="button" class="btn btn-primary" v-on:click="addService">Add</button>
add service method:
addService() {
for (var i = 0; i < this.services.length; i++) {
if (this.services[i]._id == this.selectedServiceId) {
this.services_goods.push(this.services[i])
break;
}
}
}
And now I want to render the list I've pushed into:
<ul>
<li v-for="(item, key) in services_goods">
<span>{{item.name}}</span>
<label for="itemPrice">Price €
<input id="itemPrice" v-model="item.price">
</label>
<label for="itemQty">Quantity
<input type="number" min="1" id="itemQty" v-model="item.quantity">
</label>
<div>
<button type="button" v-on:click="removeService(item._id)">X</button>
</div>
</li>
</ul>
everything is fine up until I add the same item twice and try to modify the price for one of them - it changes price for both.
The reason it changes the price for both is that they are the same object. When you insert an object into an array, the value in the array is a reference to the object. You have two references to the same object.
Each object you insert into the array should be newly created, with contents copied from the selected item.
new Vue({
el: '#app',
data: {
selectedServiceId: null,
services: [{
_id: 1,
price: 1,
quantity: 1,
name: 'First'
},
{
_id: 2,
price: 2,
quantity: 2,
name: 'Second'
}
],
services_goods: []
},
methods: {
addService() {
const foundGood = this.services.find((s) => s._id == this.selectedServiceId);
// Object.assign copies an object's contents
this.services_goods.push(Object.assign({}, foundGood));
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
<select class="form-control" v-model="selectedServiceId">
<option v-for="service in services" :value="service._id">{{service.name}}</option>
</select>
<button type="button" class="btn btn-primary" v-on:click="addService">Add</button>
<ul>
<li v-for="(item, key) in services_goods">
<span>{{item.name}}</span>
<label for="itemPrice">Price €
<input id="itemPrice" v-model="item.price">
</label>
<label for="itemQty">Quantity
<input type="number" min="1" id="itemQty" v-model="item.quantity">
</label>
<div>
<button type="button" v-on:click="removeService(item._id)">X</button>
</div>
</li>
</ul>
</div>