I try to my 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.name+'">{{ option.name }}</option>\
</select>',
mounted() {
...
},
...
};
</script>
I separate them using separator |
So, I'll be using a split to get the id and the name
I try like that, but there exist error :
Uncaught ReferenceError: option is not defined
How can I solve it?
Here is what you want:
new Vue({
el: '#demo',
data: {
selected: '',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value+'|'+option.text">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
Related
I have tricky challenge with vuejs, I want to have two select fields. the first one should select fruits for example, and the second should list all fruits. If I select vegetable from the first select field, the second select field should list all vegetable.
I stumble and find similar stuff online but I don't know how to make first item in the second select field selected.
anytime I select fruits, the first item on the list in second select first should be selected as default, and if I select vegetable, the first item in the second select field should be selected as default.
pls help me check the code here: https://jsfiddle.net/aj6g87dh/1/
new Vue({
el: '#test',
data: {
category: 'fruits',
list: '',
optionsData: {
fruits: [
{ text: 'Orange', value: 'orange' },
{ text: 'Banane', value: 'banana' },
],
vegetables: [
{ text: 'Brocolis', value: 'brocolis' },
{ text: 'Radish', value: 'radish' },
]
}
},
computed: {
options: function() {
let options = ''
switch (this.category) {
case 'fruits':
options = this.optionsData.fruits
break;
case 'vegetables':
options = this.optionsData.vegetables
break;
default:
options = this.optionsData.fruits
}
return options
}
},
methods: {
onChange: function() {
this.options = this.options
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<div id="test">
<select v-model="category" v-on:change="onChange" id="select1">
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<select id="select2" v-model="list">
<option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option>
</select>
<span>{{ }}</span>
</div>
You can remove onChange method and add a watch property. This way you can handle changing logic there.
Also, you can simplify options retrieval to one line.
new Vue({
el: '#test',
data: {
category: 'fruits',
list: '',
optionsData: {
fruits: [{
text: 'Orange',
value: 'orange'
},
{
text: 'Banane',
value: 'banana'
},
],
vegetables: [{
text: 'Brocolis',
value: 'brocolis'
},
{
text: 'Radish',
value: 'radish'
},
]
}
},
computed: {
options: function() {
return this.optionsData[this.category]
}
},
watch: {
category: {
handler: function(newVal) {
this.list = this.optionsData[newVal][0].value;
},
immediate: true
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
<select v-model="category" id="select1">
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
</select>
<select id="select2" v-model="list">
<option v-for="(option, i) in options" v-bind:value="option.value"> {{ option.text }} </option>
</select>
<span>{{ }}</span>
</div>
I am struggling to output one of the object properties (SKU) from an item selected in a dropdown box. I have tried a few variants with no success.
How can I access one of the object properties if I don't display it (use an expression) in the dropdown. In essence, how do I show the SKU of an item outside of the dropdown?
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A', sku:'TT5' },
{ text: 'Two', value: 'B', sku:'BB8' },
{ text: 'Three', value: 'C', sku:'AA9' }
]
}
})
Try to bind the whole object to your option element as follows :
<option v-for="option in options" v-bind:value="option">
by this way you could access its properties like :
<span>Selected: {{ selected.value }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
Since you need the value property to be passed to the backend you could use a computed property to get the selected the object based on the selected value :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
selectedVal: 'A',
options: [{
text: 'One',
value: 'A',
sku: 'TT5'
},
{
text: 'Two',
value: 'B',
sku: 'BB8'
},
{
text: 'Three',
value: 'C',
sku: 'AA9'
}
]
},
computed: {
selected() {
return this.options.find(op => {
return op.value == this.selectedVal
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<select v-model="selectedVal">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<br/>
<span>Selected: {{ selected }}</span>
<p>The SKU of your selected item is {{ selected.sku }}</p>
</div>
I do not know how to explain this so here is the code:
Component:
Vue.component( 'dropdown', {
props: [ 'key', ],
template: `
<select>
<option value="0">Please select</option>
<option v-for="option in fields[key].options" :value="option.value">
{{ option.text }}
</option>
</select>`,
})
fields is just a global object:
var fields = {
gender: {
title: 'Select Gender',
options: [
{value: 'male', text:'male'},
{value: 'female', text:'female'}
]
},
...
}
Finally in my html i have:
<dropdown key='gender'></dropdown>
In the component I tried to replace fields[ key ].options with fields[ + "'" + key + "'" + ].options then i got option is not defined.
So after the changes my component
Vue.component( 'dropdown', {
props: [ 'key', ],
template: `
<select>
<option value="0">Please select</option>
<option v-for="option in fields[ + '\'' + key + '\'' + ].options" :value="option.value">
static text instead of option.text for tesing
</option>
</select>`,
})
And now the rendered html is: <!---->
Turned out that key is used by something in Vue or somewhere else and changing it another name like somekey solved the problem.
For those who may need this in the future, here is the new component:
Vue.component( 'dropdown', {
props: [ 'somekey', ],
template: `
<select>
<option value="0">Please select</option>
<option v-for="option in fields[ somekey ].options" :value="option.value">
{{ option.text }}
</option>
</select>`,
})
and of course the in html becomes <dropdown somekey='gender'></dropdown>
I'm trying to make a select group in Vue.
Fiddle: https://jsfiddle.net/Tropicalista/vwjxc5dq/
I've tried this:
<optgroup v-for="option in options" v-bind:label="option">
<option v-for="sub in option" v-bind:value="option.value">
{{ sub.text }}
</option>
</optgroup>
My data:
data: {
selected: 'A',
options: {
First: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }
],
Second: [
{ text: 'Three', value: 'C' }
]
}
}
You are binding the label attribute to option, which is an array. What you want is to bind to the object's key.
You can get the key of each option by specifying a second parameter in the v-for directive:
<optgroup v-for="(option, key) in options" v-bind:label="key">
I'd also rename your options property to optionGroups to avoid further confusion:
data: {
selected: 'A',
optionGroups: {
First: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }
],
Second: [
{ text: 'Three', value: 'C' }
]
}
}
That way, the template will make more sense:
<optgroup v-for="(group, name) in optionGroups" :label="name">
<option v-for="option in group" :value="option.value">
{{ option.text }}
</option>
</optgroup>
according to above answer. I improve optgroup tag by adding label in optgroup tag
<optgroup v-for="(group, name) in optionGroups" :key="name" :label="`${name}`">
<option v-for="option in group" :key="option.value">
{{ option.text }}
</option>
</optgroup>
How to change dynamically the options in a select dropdown v-model ?
I have 2 select inputs, one should change according to the others.
For example, if i select "fruits" the select display the fruits, if i select "vegetables" it displays the vegetables.
I don't use Vuejs, but after looking at the documentation:
var TypesArr = {
Fruit: [{ text: 'Apple', value: 'Apple' }, { text: 'Orange', value: 'Orange' }, { text: 'Mango', value: 'Mango' }],
Meat: [{ text: 'Steak', value: 'Steak' }, { text: 'Pork', value: 'Pork' }]
}
var selectTwo = new Vue({
el: '#select2',
data: {
selected: TypesArr['Fruit'][0],
options: TypesArr['Fruit']
},
methods: {
update: function (value)
{
this.options = TypesArr[value]
}
}
})
new Vue({
el: '#select1',
data: {
selected: 'Fruit',
options: [ { text: 'Fruit', value: 'Fruit' }, { text: 'Meat', value: 'Meat' } ]
},
methods: {
onChange: function (event)
{
selectTwo.update(event.srcElement.value)
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<select v-on:change="onChange" id="select1">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<select id="select2">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
The other answers are not really 'Vue' answers.
How you handle this depends on what you want to do with the select box. I'm assuming you'll to handle the input on a form.
Two options:
Use a Computed property
Use v-if to show different select boxes. This would be ideal if each select box has a different v-model
Computed Property
<template>
<div class="container">
<select id="firstInput" v-model="selected">
<option v-for="option in firstInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInput" v-model="secondInputSelected">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
</div> <!-- /container -->
</template>
<script>
export default {
computed: {
secondInputOptions(){
return this.selected === 'fruit' ? this.fruit : this.vegetables
}
},
data () {
return {
fruit: ['apple', 'banana', 'orange'],
vegetables: ['carrot', 'beet', 'celery'],
firstInputOptions: ['fruit', 'vegetables']
selected: 'fruit',
secondInputSelected: ''
}
},
}
</script>
Conditional Rendering
<template>
<div class="container">
<select id="firstInput" v-model="selected">
<option v-for="option in firstInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInputFruit" v-model="selected" v-if="selected == 'fruit'">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
<select id="secondInputVegetables" v-model="vegetableSelected" v-else-if="selected == 'vegetables'">
<option v-for="option in secondInputOptions" :value="option">
{{ option }}
</option>
</select>
</div> <!-- /container -->
</template>
<script>
export default {
data () {
return {
fruits: ['apple', 'banana', 'orange'],
fruitSelected: '',
vegetables: ['carrot', 'beet', 'celery'],
vegetableSelected: '',
firstInputOptions: ['fruit', 'vegetables']
selected: 'fruit'
}
},
}
</script>
Using pure javascript
var typesArr = {fruit: ['Apple', 'Orange', 'Mango'], meat: ['Steak', 'Pork']}
function changeContext(value)
{
if (typesArr.hasOwnProperty(value)) {
var out = ''
for (var i = 0; i < typesArr[value].length; i++) {
out += '<option value="' + typesArr[value][i] + '">' + typesArr[value][i] + '</option>'
}
document.getElementById('select2').innerHTML = out
}
}
changeContext('fruit')
<select onchange="changeContext(this.value)">
<option value="fruit">Fruit</option>
<option value="meat">Meat</option>
</select>
<select id="select2"></select>