I have a select with options created using a Vue.js v-for loop. This works fine but the issue I am having is taking and ID of the option and assigning that to my v-model
What's in my data property
mplans: [
{
name: 'silver',
id: 'silver-m-2019-07-16'
},
{
name: 'gold',
id: 'gold-m-2019-07-16'
},
],
My select
<select class="form-control" v-model="plan">
<option disabled hidden>Select A Plan</option>
<option v-for="plan in mplans">{{ plan.name }} - Monthly</option>
</select>
You can do this to get the ID from the selected option
<select class="form-control" v-model="plan">
<option disabled hidden value="">Select A Plan</option>
<option v-for="p in mplans" :value="p.id" :key="p.id">
{{ p.name }} - Monthly
</option>
</select>
Note: I've changed the v-for "plan" for "p", it can be ambiguous
Related
I have a parent component which calls a child component.
The parent :
<select-school-type class="form-control" required value="this.school_type_id" #selected="changeSchoolTypeId">></select-school-type>
The child :
<select v-on:change="$emit('selected', $event.target.value)" v-model="value">
<option value="">{{ placeholder }}</option>
<option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
</select>
The parent can "send" a value to the child (it is the props I called 'value'). And the child must add the "selected" option to the correct item.
I tried a lot of things without success. It is my first components.
value="this.school_type_id"
this is not defined in the template area:
<select-school-type class="form-control" required value="school_type_id" #selected="changeSchoolTypeId"></select-school-type>
If you pass the prop without using:, (value="school_type_id") school_type_id will be type of string. But here we like to pass the variable school_type_id → :value="school_type_id"
v-model in the child changes the prop value, which isn't allowed by vue. You should see a warning in the console: "Avoid changing props directly ....". Change it this way and perhaps it works as expected:
<select #change="$emit('selected', $event.target.value)" :selected="value">
<option value="">{{ placeholder }}</option>
<option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
</select>
If you like to use v-model instead, you can bind a computed getter/setter to it's value: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter
In the setter, you emit the new value:
computed: {
selectedValue: {
get() {
return this.value;
},
set(newValue) {
this.$emit('selected', newValue);
},
},
},
<select v-model="selectedValue">
<option value="">{{ placeholder }}</option>
<option :value="schoolType.id" v-for="(schoolType, index) in schoolTypes" :key="index">{{ schoolType.id }}</option>
</select>
I am trying to get the dropdown to autocomplete. I have a saved address in Chrome but the only field that is not autocompleting is the dropdown for state.
The options are listing correctly but it's just not autocompleting it.
export default {
data() {
return {
selectedState: null,
states: [
{label: 'California', code: "CA"},
{label: 'New York', code: "NY"},
]
}
}
<select name="state" autocomplete="state">
<option
v-for="state in states" v-bind:value="selectedState">
{{ state.label }}
</option>
</select>
I think you want something like this
<select v-model="selectedState" name="state" autocomplete="address-level1">
<option disabled value="">Select a state</option>
<option v-for="state in states" :key="state.code" :value="state.code">
{{ state.label }}
</option>
</select>
According to these docs, the autocomplete value you want for state is "address-level1".
This will bind the selected state code to your selectedState model.
If you want to bind the entire state model (eg { code, label }) to selectedState, use :value="state" instead.
In testing, I found this did not play well with the auto-fill feature.
See https://v2.vuejs.org/v2/guide/forms.html#Select
I have a dropdown that is populated with an array of objects.
<select v-model="selectedLeague" v-on:change="chooseLeague()">
<option v-for="league in model.leagues" v-bind:value="league">
{{ league.name }}
</option>
</select>
At initialization, selectedLeague is {}
I want to add a default option that is selected when the object is empty. I tried adding
<option disabled v-bind:value=null>Choose League</option>
But that will not work because it is never null. What can I add to check if the object is empty using data binding? I am using version 2.4.4 btw
Since selectedLeague is initially {}, you can use:
<option disabled v-bind:value="{}">Choose League</option>
Demo:
new Vue({
el: '#app',
data: {
selectedLeague: {},
model: {
leagues: [{name: 'leagueOne'},{name: 'leagueTwo'}]
}
},
methods: {
chooseLeague() { console.log('chooseLeague()', this.selectedLeague); }
}
})
<script src="https://unpkg.com/vue#2.4.4"></script>
<div id="app">
<select v-model="selectedLeague" v-on:change="chooseLeague()">
<option disabled v-bind:value="{}">Choose League</option>
<option v-for="league in model.leagues" v-bind:value="league">
{{ league.name }}
</option>
</select>
</div>
Note: you can also add hidden if you want to hide that option from the dropdown:
<option disabled v-bind:value="{}" hidden>Choose League</option>
Am I grabbing the value of the selection incorrectly in this Vue template form?
<select class="form-control" v-model="object.property">
<option selected="selected" value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
You are binding the value of object.property to the select element correctly.
But, Vue is going to ignore the selected attribute on the first option element.
Here's the warning you will get if you try to use this template:
inline selected attributes on <option> will be ignored when using v-model. Declare initial values in the component's data option instead.
So, if you want the initial value of the select to be the first option, set object.property to that value when you define it in the data method.
Here's an example:
new Vue({
el: '#app',
data() {
return { object: { property: "Option 1" } }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<select class="form-control" v-model="object.property">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
{{ object.property }}
</div>
Im trying to get value of select region in vue.js but i get an empty value.
alert(this.property_credentials.district);
Any suggestion how can i get value from select ?
<select v-model="property_credentials.district" name="district" class="country selectpicker" id="selectCountry" data-size="10" data-show-subtext="true" data-live-search="true">
<option value="0">--Please select your district</option>
<optgroup v-for='district in districts' label="#{{district.district}}">
<option v-for='region in district.regions' value="#{{region}}" >#{{region}}</option>
</optgroup>
</select>
1. Here is a working JS Fiddle for the current question.
2. Here is a working JS Fiddle for simple html select tag.
Now Your Question
Well i don't think there is a problem with vue not selecting. There must be a very small issue which you need to fix.(Since i cannot see your javascript code, so I'm assuming it's in your javascript).
<div id="app">
<select v-model="property_credentials.district" name="district" >
<option value="0">--Please select your district</option>
<optgroup v-for='district in districts'>
<option v-for="region in district.regions" :value="region">{{ region }}</option>
</optgroup>
</select>
<br>
Selected value is : {{ property_credentials.district }}
</div>
new Vue({
el: '#app',
data: function(){
return {
property_credentials: {
district: ''
},
districts: [
{district: 'x', regions: [ 'a', 'b', 'c', 'd' ]}
]
}
}
})