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
}
}
Related
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: "",
};
},
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>