i have the object like this;
fluit:[
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
]
And code in vuejs like this
<select >
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select"{{item.name</option>
</select>
and what i get from this tag it's like this
and what i want to ask is how can i get the value as the id of each option. like a when i select Mango and the value is 003.
if you know how to solve this please help me.
thank you.
For Your Solution use this -
<template>
<select name="itemType" v-model="itemType" #change="onChange()" class="form-control">
<option value="001">Apple</option>
<option value="002">Banana</option>
</select>
</template>
<script>
export default {
data() {
return {
itemType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.itemType)
}
}
}
</script>
My advice use vuetify (v-select)component with vue for better performance.
<template>
<v-select
v-model="select"
:items="fluit"
item-text="id"
item-value="name"
label="Select"
#input="doSomething"
return-object/>
</template>
<script>
export default {
data () {
return {
select: { id:'005', name:"papaya" },
items: [
{id:'001', name:"Apple"},
{id:'002', name:"Banana"},
{id:'003', name:"Mango"},
{id:'004', name:"orange"},
{id:'005', name:"papaya"},
],
}
method:{
doSomething(){
console.log(this.select)
}
}
},
}
</script>
I Hope it will help!
add a v-model to your select and that is it:
<select v-model="selectedItem">
<option v-for="(item, index) in fluit" :key="index" :value="item.id" id="select">
{{item.name}}
</option>
</select>
now selectedItem will contain the value of the fruit, working example :
https://codesandbox.io/s/fruit-select-vs709
Related
I tried #change and watch as well. None of them seem to work.
How to detect when select value is changed?
Here is my code:
<select v-model="selected" #change="changeLang()" >
<option v-for="item in langList" :key="item.text" :value="item.lang">
{{ item.text }}
</option>
</select>
function changeLang()
{
console.log("Called>>>>");
}
watch(() => selected, (first, second) => {
console.log(
"Watch props.selected function called with args:",
first,
second
);
});
Try like following snippet:
const { ref } = Vue
const app = Vue.createApp({
setup() {
const selected = ref(null)
const langList = ref([{text:'en', lang: 'english'}, {text:'de', lang: 'deutsch'}, {text:'it', lang:'italian'}])
const changeLang = () => {
console.log("Called>>>>", selected.value);
}
return {
selected, langList, changeLang
}
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
<select v-model="selected" #change="changeLang()" >
<option v-for="item in langList" :key="item.text" :value="item.lang">
{{ item.text }}
</option>
</select>
</div>
I am looking for a way to get a value out of a v-for loop. Can anyone help me with this?
I have the following code:
Select Country:
<select #change="selectCountryStats(country.code)">
<option
v-for="country in everyCountry"
:key="country.name"
value="country.name"
>
{{ country.name }}
</option>
</select>
and in #change I would like to get the value of country.code, but this value is first known, when the v-for loop is triggered, which is not the case.
Any solution for this problem will be appreaciated.
You can't use the v-for's iterator outside of the v-for loop because it's out of scope.
For the change-event handler to receive the country code, you'd have to change the <option>.value bindings from country.name to country.code:
<option :value="country.code">
For inline event handlers, the event parameter is stored in a special $event variable. And since the change event's target is the <select>, you could access the new value (the country code of the selection) in the change-event handler via $event.target.value:
<select #change="selectCountryStats($event.target.value)">
new Vue({
el: '#app',
data: () => ({
everyCountry: [
{
name: 'United States',
code: 'US'
},
{
name: 'Canada',
code: 'CA'
},
]
}),
methods: {
selectCountryStats(e) {
console.log(e)
}
}
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<div id="app">
<select #change="selectCountryStats($event.target.value)">
<option
v-for="country in everyCountry"
:key="country.name"
:value="country.code"
>
{{ country.name }}
</option>
</select>
</div>
I have vue component like this :
<script>
export default{
template: '\
<select class="form-control" v-on:change="search">\
<option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'">{{ option.name }}</option>\
</select>',
mounted() {
this.fetchList();
},
...
};
</script>
It works. No error
But, I want to add condition again in select
If it meets the conditions then selected
I add condition like this :
template: '\
<select class="form-control" v-on:change="search">\
<option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'" option.id == 1 ? \'selected\' : \'\'>{{ option.name }}</option>\
</select>',
There exist error like this :
[Vue warn]: Property or method "option" is not defined on the instance
but referenced during render. Make sure to declare reactive data
properties in the data option.
How can I solve it?
This should work. Change your code like this.
<option v-for="option in options" v-bind:value="option.id ? option.id+\'|\'+option.name : \'\'" v-bind:selected="option.id == 1">{{ option.name }}</option>\
Since selected is boolean attribute you'll have to use v-bind:selected="<condition>". This will insert the attribute based on the conditional's result.
I would change to a v-model based:
<select #change="search" v-model="select">
<option v-for="option in options" :value="option.id">
{{ option.name }}
</option>
</select>
<script>
export default {
props: {
value: [Number, String]
},
data() {
return { select: this.value };
},
watch: {
value: function (val) {
this.select = val;
}
},
methods: {
// ...
}
};
</script>
I'm using Vue.js with the Mininmalect HTML select plugin to display a list of countries by name and value (value being the 2 digit country code).
I've got it to work when using the plugin to select a country. It's adds the value to the selected state.
What I can't work out is how display a value/country when there is already one in state (i.e. from the database when the page loads).
This is what I have:
<template>
<select name="country" v-model="country">
<option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selected: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
$('select').minimalect({
onchange: function(value) {
vm.selected = value;
}
});
}
};
</script>
I'm struggling to get the select attribute to appear, i.e. <option value="GB" selected>United Kingdom</option> so there is a default when the page is loaded.
You've got v-model="country", so if you just set the value of country to the database value, the select will automatically be set to that value.
data() {
return {
country: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
$('select').minimalect({
onchange: function(value) {
vm.country = value;
},
afterinit: function() {
$('select').val(vm.country).change();
}
});
}
Change your v-model with selected. And I think your problem is a performance problem. Add a setTimeout for your function.
<template>
<select name="country" v-model="selected">
<option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selected: 'GB',
countries: require('../utilities/countries.js'),
}
},
ready() {
var vm = this;
setTimeout(function(){
$('select').minimalect({
onchange: function(value) {
vm.selected = value;
}
});
});
}
};
</script>
I'm using vue js for my application in select option input..I need to set default value should be selected in the drop down and while on change i would like to call two functions ..
I'm new to vue js..
My Code :
var listingVue = new Vue({
el: '#mountain',
data:{
formVariables: {
country_id: '',
mountain_id: '',
peak_id: ''
},
countrylist:[],
mountainlist:[],
},
ready: function() {
var datas = this.formVariables;
this.getCountry();
},
methods: {
getCountry: function()
{
this.$http.get(baseurl+'/api/v1/device/getCountry',function(response)
{
this.$set('countrylist',response.result);
//alert(jQuery('#country_id').val());
});
},
getMountain: function(country_id)
{
var datas = this.formVariables;
datas.$set('country_id', jQuery('#country_id').val() );
postparemeters = {country_id:datas.country_id};
this.$http.post(baseurl+'/api/v1/site/getMountain',postparemeters,function(response)
{
if(response.result)
this.$set('mountainlist',response.result);
else
this.$set('mountainlist','');
});
},
});
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
v-on="change:getMountain(formVariables.country_id);">
<option
v-repeat = "country: countrylist"
value="#{{country.id}}" >
#{{country.name}}
</option>
</select>
With vue 2, the provided answer won't work that well. I had the same problem and the vue documentation isn't that clear concerning <select>. The only way I found for <select> tags to work properly, was this (when talking of the question):
<select v-model="formVariables.country_id">
<option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>
I assume, that the #-sign in #{{...}} was due to blade, it should not be necessary when not using blade.
In VueJS 2 you can bind selected to the default value you want. For example:
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
v-on:change="getMountain(formVariables.country_id);">
<option
v-for = "country in countrylist"
:selected="country.id == 1"
:value="country.id" >
{{country.name}}
</option>
</select>
So, during the iteration of the countryList, the country with the id 1 will be selected because country.id == 1 will be true which means selected="true".
UPDATED:
As Mikee suggested, instead of v-on="change:getMountain(formVariables.country_id);" there is a new way to for binding events. There is also a short form #change="getMountain(formVariables.country_id);"
You should use the 'options' attribute in place of trying to v-repeat <option></option>:
VM
data: {
countryList: [
{ text:'United States',value:'US' },
{ text:'Canada',value:'CA' }
]
},
watch: {
'formVariables.country_id': function() {
// do any number of things on 'change'
}
}
HTML
<select
class="breadcrumb_mountain_property"
id="country_id"
v-model="formVariables.country_id"
options="countryList">
</select>
You can use select in this way. Remember to use array in v-for.
<select v-model="album.primary_artist">
<option v-for="i in artistList" :key="i.id" :value="i.name">
{{ i.name }}
</option>
</select>
You can use this way.
<select v-model="userData.categoryId" class="input mb-3">
<option disabled value="null">Kategori</option>
<option
v-for="category in categoryList"
:key="category.id"
:value="category.id"
>
{{ category.name }}
</option>
</select>
export default {
data() {
return {
categoryList: [],
userData: {
title: null,
categoryId: null,
},
};
},
The important thing here is what the categoryId value is, the default option value should be that.
categoryId: null,
<option disabled value="null">Kategori</option>
Here we use categoryId as value in v-model and initialize it with null. Value must be null in default option.
<select v-model="userData.categoryId" class="input mb-3">