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>
Related
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
I have a vue component like this :
<script>
export default{
template: '\
<select class="form-control" v-model="selected" v-on:change="search">\
<option v-for="option in options" v-bind:value="option.id" v-bind:disabled="option.disabled">{{ option.name }}</option>\
</select>',
mounted() {
this.fetchList();
},
data() {
return {
selected: '',
options: [{id: '', name: window.trans.category.select}]
};
},
methods: {
search(e){
window.location = window.BaseUrl + '/search?q=&cat=' + e.target.value;
},
fetchList: function() {
this.$http.post(window.BaseUrl+'/category/list?parent_id=all').then(function (response) {
response.data.forEach(function(item){
this.options.push({id:item.id, name:item.name})
}, this);
});
},
}
};
</script>
When category clicked, I want get text of the category
On my code above, I use this : e.target.value to get id selected and it works
But, how can I get text selected when category clicked?
I try this : e.target.text, but id does not work
Is there anyone who can help me?
Given you want both id and name, you can try this:
template: '\
<select class="form-control" v-on:change="search">\
<option v-for="option in options" v-bind:value="option.id" #click="selected=option.name" v-bind:disabled="option.disabled">{{ option.name }}</option>\
</select>',
mounted() {
this.fetchList();
},
I'm trying to implement custom select component with Vuejs 2. As stated in the documentation that i should not modify value props directly and suggested to use event to pass the selected data to parent component. I'm having issue when the option value is an object and got [Object object] instead.
here's my select component template:
<div :class="inputLength">
<select :id="id"
:value="value"
#change="setValue($event.target.value)"
:multiple="multiple"
class="selectpicker">
<option value="">Nothing selected.</option>
<option :selected="option == value" v-for="option in options"
:value="option">
{{ option[label] }}
</option>
</select>
<span v-if="error.any()" class="help-block" v-text="error.all()"></span>
</div>
and here's the script part:
export default {
props: {
value: {
default() {
return ''
}
},
options: {
type: Array,
require: true
},
...
},
methods: {
setValue(val) {
this.error.clear();
this.$emit('input', val);
}
}
}
and here's the parent component
<input-select-horizontal
v-model="form.category"
:label-class="{'col-md-4': true}"
input-length="col-md-8"
:options="categories.all()"
label="name"
:error="form.errors.get('category_id')">
<span slot="label">Category <span class="required" aria-required="true">*</span></span>
the options:
[
{
id: 1,
name: 'Category 1',
description: 'desc 1'
},
{
id: 2,
name: 'Category 2',
description: 'desc 2'
},
...
]
I'm expecting the
form.category = {
id: 1,
name: "Category 1",
description: "desc 1"
}
but got [Object object]
did i miss something?
Your problem lies here:
<option v-for="option in options" :value="option">
{{ option[label] }}
</option>
You're taking a whole object and assigning it to the value attribute of the option element. This won't work, because the value attribute has to be a string. So the object is converted to [Object object].
You should try using :value="option.id", the ID value should get through to the parent component normally and you can use it to find the right category.
As mzgajner mentioned, you can't bind an object because it will convert it to a string.
What you can do however, is to convert your object to a base64 string in the options component, and then decode it again in the select component.
For example:
Component CustomOption
<template>
<option v-bind="{ ...$attrs, value: innerValue }" v-on="$listeners">
<slot>
{{ label || $attrs.value }}
</slot>
</option>
</template>
<script>
export default {
props: {
label: [String, Number, Boolean],
},
computed: {
innerValue() {
return btoa(JSON.stringify(this.$attrs.value));
},
},
};
</script>
Component CustomSelect
<template>
<select
:value="innerValue"
v-bind="$attrs"
v-on="{
...$listeners,
input: onInput,
}"
>
<slot></slot>
</select>
</template>
<script>
export default {
props: {
value: null
},
computed: {
innerValue() {
return btoa(JSON.stringify(this.value));
},
},
methods: {
onInput(e) {
let value = JSON.parse(atob(e.target.value));
this.$emit('input', value);
},
},
};
</script>
https://www.npmjs.com/package/stf-vue-select
<stf-select v-model="value" style="width: 300px; margin: 0 auto">
<div slot="label">Input address</div>
<div slot="value">
<div v-if="value">
<span>{{value.address}} (<small>{{value.text}}</small>)</span>
</div>
</div>
<section class="options delivery_order__options">
<stf-select-option
v-for="item of list" :key="item.id"
:value="item"
:class="{'stf-select-option_selected': item.id === (value && value.id)}"
>
<span>{{item.text}} (<small>{{item.address}}</small>)</span>
</stf-select-option>
</section>
</stf-select>
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">