How to detect event on Vue.js on select [duplicate] - javascript

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)
}
}

Related

How to fix vmodel selected option vue js

So I have a web app where the user chooses from a list of options. Look at the following code:
<div class="form-group">
<select v-model="étatArticle" class="form-control">
<option value="" disabled selected>Indique l'état de ton article</option>
<option value="neuf">Neuf</option>
<option value=tresBon>Trés bon état</option>
<option value="bon">Bon état</option>
</select>
</div>
The problem is is that the v-model is causing the first selected option to disappear. to understand what I'm saying , look at the following images.
With v-model
Without v-model I get this
enter image description here
can you please help me fix that? thank you.
new Vue({
template: '#main',
data:
{
etatArticle: null
}
}).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
<template id="main">
<div class="form-group">
<select v-model="etatArticle" class="form-control">
<option :value="null" disabled selected>Indique l'état de ton article</option>
<option value="neuf">Neuf</option>
<option value=tresBon>Trés bon état</option>
<option value="bon">Bon état</option>
</select>
</div>
</template>
In your component data, you need to define the default value of your v-model. You can see example in my codesandbox.
In your template:
<select v-model="selectedValue" class="form-control">
<option value="" disabled selected>
Disabled and selected by default
</option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="third">Third</option>
</select>
In your data:
data() {
return {
// Define your value by default to show it
selectedValue: "",
};
},

How Can I Save Selected Form Option in Vue to Firebase

I have a collection that I want the option selected by the user submitted to in firebase.
<select v-model="selected">
<option disabled value="">Marital Status</option>
<option>Married</option>
<option>Single</option>
<option>Divorced</option>
<option>Widow</option>
</select>
When I bind the form select with profile.maritalStatus, the option selected will be submitted to profile collection in firebase, but the placeholder on the select form won't show on the page.
How can I bind with v-model="selected" and be able to submit it to the profile collection.
data (){
selected:"",
profile:{
maritalStatus: null,
age: null,
profession: null,
}
},
methods:{
Save(){ db.collection("profile").add(this.profile)
}
}
I want a placeholder like this
var app = new Vue({
el: '#app',
data: {
selected: ''
},
watch:{
selected:function(){
console.log('selected is ' +this.selected+" do you logic here");
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<body>
<div id="app">
<select v-model="selected">
<option value="" disabled selected>Marital Status</option>
<option>Married</option>
<option>Single</option>
<option>Divorced</option>
<option>Widow</option>
</select>
Selected:{{selected}}
</div>
</body>
Are you looking for something like this?
<select name="maritalStatus" v-model="selected">
<option value="" disabled selected>Marital Status</option>
<option>Married</option>
<option>Single</option>
<option>Divorced</option>
<option>Widow</option>
</select>
Additionally you can add a watcher to call save()
watch:{
selected:function(new,old){
//write your logic here
}
}

Vue.js get selected option on #change

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)
}
}

How to set default value in bootstrap-select dropdown with Vue.js

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

Select2 with Vue Js as directive

I have been following the vue js wrapper component example. I am trying to change how this works to allow me to add a v-select2 directive to a regular select box rather than have to create templates and components for each one.
I have a JS Bin here which shows using the component.
The component html is as follows (with the options being set in the JS).
<div id="app"></div>
<script type="text/x-template" id="demo-template">
<div>
<p>Selected: {{ selected }}</p>
<select2 :options="options" v-model="selected">
<option disabled value="0">Select one</option>
</select2>
<p>Selected: {{ selected2 }}</p>
<select2 :options="options" v-model="selected2">
<option disabled value="0">Select one</option>
</select2>
<p>Selected: {{ selected3 }}</p>
<select2 :options="options" v-model="selected3">
<option disabled value="0">Select one</option>
</select2>
</div>
</script>
<script type="text/x-template" id="select2-template">
<select>
<slot></slot>
</select>
</script>
With the JS as follows:
Vue.component('select2', {
props: ['options', 'value'],
template: '#select2-template',
mounted: function () {
var vm = this
$(this.$el)
.val(this.value)
// init select2
.select2({ data: this.options })
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
},
watch: {
value: function (value) {
// update value
$(this.$el).val(value)
},
options: function (options) {
// update options
$(this.$el).select2({ data: options })
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
})
var vm = new Vue({
el: '#app',
template: '#demo-template',
data: {
selected: 0,
selected2: 0,
selected3: 0,
options: [
{ id: 1, text: 'Hello' },
{ id: 2, text: 'World' }
]
}
})
What I want is something like the following
<div id="app">
<p>Selected: {{ selected }}</p>
<select name="selected1" id="selected1" class="select2" v-selectize v-model="selected">
... options here ...
</select>
<p>Selected: {{ selected2 }}</p>
<select name="selected2" id="selected2" class="select2" v-selectize v-model="selected2">
... options here ...
</select>
<p>Selected: {{ selected3 }}</p>
<select name="selected3" id="selected3" class="select2" v-selectize v-model="selected3">
... options here ...
</select>
</div>
You can use your component in pretty much the way you want to use your directive:
<select2 name="selected1" id="selected1" v-model="selected">
<option disabled value="0">Select one</option>
<option value="1">Hello</option>
<option value="2">World</option>
</select2>
The name and id attributes get transferred to the underlying select element.
There is no (good) way to do this with a directive, which is an intentional design decision in Vue 2. There is no communication channel between a directive and the Vue as there is between a component and its parent component. A directive is not a sub-Vue, as a component is, it is a way of dealing with a small piece of the DOM in isolation.
I do not think there would be any particular advantage to writing this with a directive rather than a component.

Categories