In the following:
<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
I want is, When i select the option, The value of selected option should appear in input box. Like when i click Test One, the input box should say 1 as selected
Is it possible to do this in Vue?
You have to used v-model to get the selected item from <select>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
</select>
<span>Selected: {{ selected }}</span>
In Javascript
new Vue({
el: '...',
data: {
selected: ''
}
})
I hope you got what you want!
You can accomplish this by using the #change event handler
<select #change="handleChange">
<option
v-for="item in options"
:value="item.value"
v-text="item.letter"
/>
</select>
new Vue({
el: "#app",
data: {
selected: undefined,
options: [
{ letter: 'A', value: '1' },
{ letter: 'B', value: '2' },
]
},
methods: {
handleChange({ target: { value } }) {
this.selected = value
}
},
})
Check out this fiddle
Related
I have a data structured like this
const options = [
{
group: 'Fruits', options: [
{ label: 'Apple', value: 'f-1' },
{ label: 'Banana', value: 'f-2' },
{ label: 'Orange', value: 'f-3' },
],
},
{ label: 'Chocolate', value: 'm-1' },
{ label: 'Cake', value: 'm-2' },
{
group: 'Vegetables', options: [
{ label: 'Cabbage', value: 'v-1' },
{ label: 'Tomato', value: 'v-2' },
],
},
{ label: 'Puddin', value: 'm-3' },
]
I would like to render it into a select component like this:
<select>
<optgroup label="Fruits">
<option value="f-1">Apple</option>
<option value="f-2">Banana</option>
<option value="f-3">Orange</option>
</optgroup>
<option value="m-1">Chocolate</option>
<option value="m-2">Cake</option>
<optgroup label="Vegetables">
<option value="v-1">Cabbage</option>
<option value="v-2">Tomato</option>
</optgroup>
<option value="m-3">Pudding</option>
</select>
I tried something like this but it gave me an error:
<select>
<optgroup v-for="group in options" v-if="group.group" :label="group.group" :key="group.group">
<option v-for="option in group" :key="option.value" :value="option.value">{{ option.label }}</option>
</optgroup>
<option v-for="option in options" v-if="!option.group" :key="option.value" :value="option.value">{{ option.label }}</option>
</select>
The 'options' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'
Any ideas on how should I render it correctly? I'm kinda struggling with this for a while, thanks in advance!
This is where the non-rendering <template> tag comes in handy
const options = [{"group":"Fruits","options":[{"label":"Apple","value":"f-1"},{"label":"Banana","value":"f-2"},{"label":"Orange","value":"f-3"}]},{"label":"Chocolate","value":"m-1"},{"label":"Cake","value":"m-2"},{"group":"Vegetables","options":[{"label":"Cabbage","value":"v-1"},{"label":"Tomato","value":"v-2"}]},{"label":"Puddin","value":"m-3"}]
new Vue({
el: "#app",
data: () => ({ options, selected: null })
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<select v-model="selected">
<template v-for="option in options">
<!-- if the `group` property is truthy -->
<optgroup v-if="option.group" :label="option.group" :key="option.group">
<option v-for="opt in option.options" :value="opt" :key="opt.value">
{{ opt.label }}
</option>
</optgroup>
<!-- otherwise -->
<option v-else :value="option" :key="option.value">
{{ option.label }}
</option>
</template>
</select>
<pre>selected = {{ selected }}</pre>
</div>
Note that you cannot put key attributes on <template> so those should go where appropriate on the elements within.
In the example above, I've also bound the entire option object instead of just the value but you can choose the best value to bind for your usage.
I have a combobox and want to do something different based on the selected combobox. I use a separate vue.html and TypeScript file.
Here's my code:
<select name="LeaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
Here's my TypeScript file:
onChange(value) {
console.log(value);
}
How do I get the selected option value in my TypeScript function?
Use v-model to bind the value of selected option's value. Here is an example.
<select name="LeaveType" #change="onChange($event)" class="form-control" v-model="key">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
data: {
key: ""
},
methods: {
onChange(event) {
console.log(event.target.value)
}
}
}
</script>
More reference can been seen from here.
# is a shortcut option for v-on. Use # only when you want to execute some Vue methods. As you are not executing Vue methods, instead you are calling javascript function, you need to use onchange attribute to call javascript function
<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
function onChange(value) {
console.log(value);
}
If you want to call Vue methods, do it like this-
<select name="LeaveType" #change="onChange($event)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
...
...
methods:{
onChange:function(event){
console.log(event.target.value);
}
}
})
You can use v-model data attribute on the select element to bind the value.
<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
data:{
selectedValue : 1, // First option will be selected by default
},
...
...
methods:{
onChange:function(event){
console.log(this.selectedValue);
}
}
})
Hope this Helps :-)
The changed value will be in event.target.value
const app = new Vue({
el: "#app",
data: function() {
return {
message: "Vue"
}
},
methods: {
onChange(event) {
console.log(event.target.value);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select name="LeaveType" #change="onChange" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</div>
You can also use v-model for the rescue
<template>
<select name="LeaveType" v-model="leaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</template>
<script>
export default {
data() {
return {
leaveType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
}
</script>
onChangeMethod --> method of your choice, it can be anything related to your program.
<template>
<select #change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
data(){
return{
...
}
},
methods:{
onChangeMethod(event)
{
console.log(event.target.value);
}
},
created(){
...
}
</script>
You can save your #change="onChange()" an use watchers.
Vue computes and watches, it´s designed for that.
In case you only need the value and not other complex Event atributes.
Something like:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
I have a combobox and want to do something different based on the selected combobox. I use a separate vue.html and TypeScript file.
Here's my code:
<select name="LeaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
Here's my TypeScript file:
onChange(value) {
console.log(value);
}
How do I get the selected option value in my TypeScript function?
Use v-model to bind the value of selected option's value. Here is an example.
<select name="LeaveType" #change="onChange($event)" class="form-control" v-model="key">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
data: {
key: ""
},
methods: {
onChange(event) {
console.log(event.target.value)
}
}
}
</script>
More reference can been seen from here.
# is a shortcut option for v-on. Use # only when you want to execute some Vue methods. As you are not executing Vue methods, instead you are calling javascript function, you need to use onchange attribute to call javascript function
<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
function onChange(value) {
console.log(value);
}
If you want to call Vue methods, do it like this-
<select name="LeaveType" #change="onChange($event)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
...
...
methods:{
onChange:function(event){
console.log(event.target.value);
}
}
})
You can use v-model data attribute on the select element to bind the value.
<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
data:{
selectedValue : 1, // First option will be selected by default
},
...
...
methods:{
onChange:function(event){
console.log(this.selectedValue);
}
}
})
Hope this Helps :-)
The changed value will be in event.target.value
const app = new Vue({
el: "#app",
data: function() {
return {
message: "Vue"
}
},
methods: {
onChange(event) {
console.log(event.target.value);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select name="LeaveType" #change="onChange" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</div>
You can also use v-model for the rescue
<template>
<select name="LeaveType" v-model="leaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</template>
<script>
export default {
data() {
return {
leaveType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
}
</script>
onChangeMethod --> method of your choice, it can be anything related to your program.
<template>
<select #change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
data(){
return{
...
}
},
methods:{
onChangeMethod(event)
{
console.log(event.target.value);
}
},
created(){
...
}
</script>
You can save your #change="onChange()" an use watchers.
Vue computes and watches, it´s designed for that.
In case you only need the value and not other complex Event atributes.
Something like:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
Here is the dropdown HTML
<div class="form-group">
<select class="form-control" id="edit-item_condition">
<option data-tokens="1">Option 1</option>
<option data-tokens="2">Option 2</option>
<option data-tokens="3">Option 3</option>
<option data-tokens="4">Option 4</option>
<option data-tokens="5">Option 5</option>
</select>
</div>
I'm trying to set default value that I fetch from DB
const editItem = new Vue({
el: "#editItem",
data: {
items: null,
selectedItem: null,
},
methods: {
set_dropdown_default(item) {
try {
this.selectedItem = item;
$('.edit-item_condition').selectpicker('val', parseInt(this.selectedItem.properties.condition));
}
catch (err) {
console.log(err);
}
},
The this.selectedItem.properties.condition in my example is "2". Checked and proved in debugger. Nevertheless, the dropdown is not affected and shows "Option 1".
You can bind the select tag via v-model with the needed option value, here is an example:
new Vue({
el:"#app",
data:{
selected: 4
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<select v-model="selected">
<option value="1">Frist</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<p>Selected item: {{selected}}</p>
</div>
so in your example you could do
<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">
Reference
I need to set the status select box to the value of customer.lStatus. However,
the select box does not get updated with a value, unless I manually write the
HTML beforehand. Wha?
Script
<script>
// ...
data () {
return {
customer: {
dLastUpdate: '2016-02-17 15:07:06',
lKey: '1007',
lLastUpdateBy: '1000',
lStatus: '100015',
sName: 'TestAgain'
},
statuses: [
[100013, 'Active'],
[100015, 'Deactivated'],
[100012, 'On Hold'],
[100014, 'On Notice'],
[100011, 'Pending']
]
};
},
// ...
</script>
Does not work
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" value="status[0]">{{status[1]}}</option>
</select>
Works
<select class="form-control" v-model="customer.lStatus">
<option value="100013">Active</option>
<option value="100015">Deactivated</option>
<option value="100012">On Hold</option>
<option value="100014">On Notice</option>
<option value="100011">Pending</option>
</select>
You are missing a colon in the value attribute.
Try:
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" :value="status[0]">{{status[1]}}</option>
</select>