<pre>
<select (change)="getSelecteItem()">
<option *ngFor="let item of sampleDropDown">
{{item.value}}
</option>
</select>
<pre>
public sampleDropDown =
[{ id: '1', value: 'Test0' }, { id: '2', value: 'Test1' }, { id: '1', value: 'Test2' }];
getSelecteItem() {
}
</code>
I am binding dropdown using Angular 8 with *ngFor..
1) I want to pass current selected option in change event
2) I want to pass current selected option index in change event
you can do that by accessing the special variable $event.
In your template (HTML file)
<select (change)="getSelecteItem($event)">
<option *ngFor="let item of sampleDropDown">
{{ item.value }}
</option>
</select>
In your component:
getSelecteItem(event) {
const value = event.target.value;
console.log(value); //// test0, test1, etc...
}
<select (change)="getSelecteItem($event)">
<option *ngFor="let item of sampleDropDown" value="{{item.id}}" >
{{item.value}}
</option>
</select>
public sampleDropDown =
[{ id: '1', value: 'Test0' }, { id: '2', value: 'Test1' }, { id: '1', value: 'Test2' }];
getSelecteItem(event) {
event.currentTarget.options.selectedIndex
event.currentTarget.options[event.currentTarget.options.selectedIndex].text
event.currentTarget.options[event.currentTarget.options.selectedIndex].value
}
Related
In Vuejs, how can i get :key value which stores value from v-for loop in a dropdown. I am trying to get id of dropdown along with the name. I can get name using #change>event.target.value but is there any possibility to get key value?
Thanks
<select #change="checkFirst($event)" v-model="firstDropdownValue">
<option value="none" selected="selected"> Select one...</option>
<option
v-for="data in getCategoriesDetail"
:key="data.id" :
:value="data.name">{{data.name}}</option>
</select>
As per my understanding, You want to get the value of :key which is data.id of the selected option from the dropdown. If Yes, You can use v-model to get the whole object instead of just name and then you can filtered out the properties you want in the script.
Demo :
new Vue({
el: '#app',
data: {
getCategoriesDetail: [{
id: 1,
name: 'Option 1'
}, {
id: 2,
name: 'Option 2'
}, {
id: 3,
name: 'Option 3'
}, {
id: 4,
name: 'Option 4'
}],
firstDropdownValue: 'none'
},
methods: {
checkFirst() {
console.log('id : ' + this.firstDropdownValue.id)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select #change="checkFirst" v-model="firstDropdownValue">
<option value="none">Select one...</option>
<option
v-for="item in getCategoriesDetail"
:key="item.id"
:value="item">{{ item.name }}</option>
</select>
</div>
You can simply use the v-model you use in your select !
And you should use the entire object in the :value instead of just the name :value="data" and then use it in the template as firstDropdownValue.name
new Vue({
el: "#app",
data: () => ({
firstDropdownValue: null,
getCategoriesDetail: [
{id:1, name: "foo"},
{id:2, name: "bar"},
{id:3, name: "baz"},
]
}),
methods: {
checkFirst(){
console.log(this.firstDropdownValue)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select #change="checkFirst" v-model="firstDropdownValue">
<option value="none" selected="selected"> Select one...</option>
<option
v-for="data in getCategoriesDetail"
:key="data.id"
:value="data"
>{{data.name}}</option>
</select>
Selected value : {{firstDropdownValue && firstDropdownValue.name}}
</div>
In my component, i have multiselect that should get options selected on matched value passed:
<select class="custom-select" multiple="" v-model="items">
<option v-for="item in objects_list" :selected="itemSelected(item)" :key="item.id" :value="item.id">
{{item.name}}
</option>
</select>
...
methods() {
itemSelected(item) {
let selected;
let object_selected = this.value.filter(object => {
console.log(object)
if(item.id == object) {
return true;
}
});
}
the selected binding doesn't seems to work, how to correctly implement multiselect to bind selected options ?
The best way to do this is to use the CREATED Function from Vue.js
<template>
<div>
<select class="ur-CSS-class" multiple v-model="selected">
<option v-for="item in objects_list" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<br />
<span>Selected : {{ selected }}</span>
</div>
</template>
<script>
var your_list = [
{ name: "one", id: 13 },
{ name: "two", id: 18 },
{ name: "three", id: 11 },
{ name: "four", id: 7 },
{ name: "five", id: 1 },
{ name: "six", id: 2 },
];
export default {
name: "App",
data() {
return {
objects_list: your_list,
selected: []
};
},
props:{
inputData: {
type: Object,
required: true
}
},
computed: {
selected() {
let selected = this.objects_list.filter(item => {
return this.inputData.find(i => i == item.id);
});
return selected;
}
}
};
</script>
Here is my code
<li>
<select v-model="selectYear" id="search-year" class="w-100 text-center mb-1" name="year" >
<option v-for="year in years" v-bind:value="year.value">
{{ year.text }}
</option>
</select>
</li>
<li>
<select v-model="selectMake" class="w-100 text-center mb-1" name="make">
<option v-for="make in makes" v-bind:value="make.value">
{{ make.text }}
</option>
</select>
</li>
and the components data:
export default {
name: 'search',
data: function () {
return{
selectYear: '2017',
years: [
{ text: '2017', year: '2017' },
{ text: '2016', year: '2016' },
{ text: '2015', year: '2015' }
],
selectMake: '',
makes: [
{ text: 'Sony', value: 'Sony', year: '2017' },
{ text: 'Asus', value: 'Asus', year: '2017' },
{ text: 'IPhone', value: 'IPhone', year: '2016'}
]
}
}
}
What I want
I have multiple select options that is connected in terms of what only to show depending on the previous selected option.
For example
Scenario 1: Year Selected: 2017
Select Make Options Available: ['Sony','Asus']
Scenario 2: Year Selected: 2017
Select Make Options Available: ['Iphone']
Scenario 3: Year Selected: None
Select Make Options Available: []
Is it possible to implement in Vue.js?
this is a typical case where you would use computed values.
add a computed value filteredMakes to filter makes based on selectYear
computed: {
filteredMakes() {
return this.makes.filter((obj, i) => {
return obj.year === this.selectYear
});
}
}
and use the computed value in the v-for for option
<option v-for="make in filteredMakes" v-bind:value="make.value">
filteredMakes will be updated automatically everytime selectYear changes. ain't Vue magical ?
I have a select element within a vue component that looks like this:
<template>
<select v-model="item.value" >
<option value="1">A</option>
<option value="2">B</option>
</select>
<div>
You selected {{item.text}} with a value of {{item.value}}
<div>
</template>
<script>
export default {
data() {
return {
item: {
text: '',
value: 0
}
}
}
}
</script>
If I make a selection, on A, I get a value of 1, if I make a selection on B. I get a value of 2. So item.value will be populated. How do I fill up item.text?
If I remove the value attribute from the options, I get the answer, but now my value wouldn't be populated.
I'd recommend using an array of objects that hold both the value and text for each <option>. For example
data() {
return {
// ...
options: [
{ value: 1, text: 'A' },
{ value: 2, text: 'B' }
]
}
}
Then you can use a v-for to iterate this list and simply bind the selected item with v-model
<select v-model="item">
<option v-for="opt in options" :key="opt.value" :value="opt">
{{opt.text}}
</option>
</select>
See https://v2.vuejs.org/v2/guide/forms.html#Select-Options
In Vue we can bind data on two way in the select component like below:
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
Our Vue code is:
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
Here v-model property works for the value of the option.
Is there any method for the same thing to the text property of the option.
In other words, is there any method works with One,Two and Three values.