I am trying to change the selected option on page load. When the page is loaded and new or used is not null the I want which ever on that is not null to be selected instead of it alway selecting status. I have tried many things and nothing has worked and have not been able to fin much online about how to make this work.
I have tried it with and without v-bind, without v-model, and other ways that I saw online.
<select id="application-status" class="custom-select" v-model="selected">
<option :value="null" disabled>Status</option>
<option :value="'new'" v-bind:selected="item.new != null">New</option>
<option :value="'used'" v-bind:selected="item.used != null">Used</option>
</select>
Right no no matter what Status always shows up.
You need to set the value of selected in some manner. One way is, as Sphinx pointed out in their comment, is to use a mounted() lifecycle hook:
const app = new Vue({
el: "#app",
mounted() {
this.selected = "used";
},
data() {
return {
selected: "",
item: "new"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.min.js"></script>
<div id="app">
<select id="application-status" class="custom-select" v-model="selected">
<option :value="null" disabled>Status</option>
<option :value="'new'" v-bind:selected="item.new != null">New</option>
<option :value="'used'" v-bind:selected="item.used != null">Used</option>
</select>
</div>
Related
I am looking for help on how to display the second option in a select drop-down menu after the select menu is disabled.
It is disabled if there are fewer than 2 options left. The first option is the 'Please select' option but I would like it to display the one remaining option which is the second option. i.e. 'Scotland' in the code below. The data is pulled in using an Axios call so I do not know what the value will be.
Any help would be greatly appreciated.
The select menu code
<select disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option value="Scotland"> Scotland </option>
</select>
Vue
computed: {
selectDisabled: function() {
return this.options.length <= 2;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="quantity" :disabled="selectDisabled">
<option disabled value="">Select</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
</div>
You need to create a special computed property that will dynamically tell the <select> which option it should show inside itself. <select> show the option that matches the <select>'s value.
So:
When the select is disabled (has less than 2 options) force it's value to be the value of the first listed option (this.options[0]).
When the select is enabled, pass the normal value selected by the user (this.value)
I've implemented the logic you need below (make sure to click "Run snippet"):
const App = {
el: '#app',
template: `
<div>
<!--
Remember that writing v-model="quantity" is the same as writing :value="quantity" #input="quantity = $event"
(or #input="quanity = $event.target.value" if you put in HTML elements)
You can't use v-model="valueFormatted" here because this would be the same as writing
:value="valueFormatted" #input="valueFormatted = $event.target.value"
So that's a mistake, because valueFormatted is a computed and you can't assign to it
(unless you create a special computed with a setter, but that's not what you need right now)
-->
<select :value="valueFormatted" #input="value = $event.target.value" :disabled="disabled">
<option disabled="disabled" value="">Select nationality</option>
<option v-for="option in options" :value="option">{{option}}</option>
</select>
<hr>
<div>
<button #click="options = ['Scotland']">Make the select have 1 item</button>
<button #click="options = ['Scotland', 'Poland']">Make the seelct have 2 items</button>
</div>
</div>
`,
data() {
return {
options: ["Scotland", "Poland"],
value: '',
}
},
computed: {
disabled() {
return this.options.length < 2
},
/*
* If this.disabled is true, returns the value of the first option
* If it's false, it returns the normal value from data (user selected)
*/
valueFormatted() {
//watch out - this computed will return undefined if this.disabled is true and if options is empty
//to avoid that, you can do for example this:
//return this.disabled === true ? (this.options[0] ?? '' ) : this.value;
return this.disabled === true ? this.options[0] : this.value;
},
},
}
new Vue(App);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<body>
<div id="app" />
</body>
</html>
You're probably going to use this select's value later to make eg. an API call, so make sure to send this.valueFormatted instead of this.value
I am trying to create selected dropdown with vue JS
The code following :
<select v-model="selected"> IDR
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
So the question is how do i give name select tag? i try to add "IDR" but still can't show the "IDR" text
How to solve this or any suggestion about this?
The below code helps to get name and value:
var app = new Vue({
el: '#app',
data (){
return {
selected:null
}
},
methods:{
onChange(e){
console.log("name:" + document.getElementsByTagName("select")
[0].getAttribute("name") + " value:" + e.target.value )
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select #change="onChange" v-model="selected" name="IDR">
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
</div>
I'm not 100% sure, wether i understand the question correct. You can add some name or ref attribute to the select either via HTML or the vue api for ref.
<select v-model="selected" name="IDR" ref="IDR">
<!-- Options -->
</select>
However, if you want to display a default option to the user then have a look at this answer.
I have a dropdown that is populated with an array of objects.
<select v-model="selectedLeague" v-on:change="chooseLeague()">
<option v-for="league in model.leagues" v-bind:value="league">
{{ league.name }}
</option>
</select>
At initialization, selectedLeague is {}
I want to add a default option that is selected when the object is empty. I tried adding
<option disabled v-bind:value=null>Choose League</option>
But that will not work because it is never null. What can I add to check if the object is empty using data binding? I am using version 2.4.4 btw
Since selectedLeague is initially {}, you can use:
<option disabled v-bind:value="{}">Choose League</option>
Demo:
new Vue({
el: '#app',
data: {
selectedLeague: {},
model: {
leagues: [{name: 'leagueOne'},{name: 'leagueTwo'}]
}
},
methods: {
chooseLeague() { console.log('chooseLeague()', this.selectedLeague); }
}
})
<script src="https://unpkg.com/vue#2.4.4"></script>
<div id="app">
<select v-model="selectedLeague" v-on:change="chooseLeague()">
<option disabled v-bind:value="{}">Choose League</option>
<option v-for="league in model.leagues" v-bind:value="league">
{{ league.name }}
</option>
</select>
</div>
Note: you can also add hidden if you want to hide that option from the dropdown:
<option disabled v-bind:value="{}" hidden>Choose League</option>
I have this:-
<div class="form-group">
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option value=true>Yes</option>
<option value=false>No</option>
</select>
</div>
I set allowMultiple=true when I initialize it, but when I select No then allowMultiple='false' So its no longer a Boolean but a String? How to get it to be Boolean?
In HTML, if you set attribute value in a tag, the value will be default type--string.So you can use vue v-model to bind it to other type value, for example, Boolean, Number and etc.
Following code is working, the result is what you want
new Vue({
el:'#app',
data: {
allowMultiple: false
},
methods: {
print: function () {
alert(this.allowMultiple);
}
}
})
<div class="form-group" id='app'>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple" #change='print'>
<option :value='true'>Yes</option>
<option :value='false'>No</option>
</select>
</div>
<script src="https://unpkg.com/vue#2.4.2/dist/vue.min.js"></script>
Here is a way to do it in Vue.
Instead of hard coding your options in html. Use the Vue way, set an array of options in your Vue data then use v-for to render all the options from the array.
Each option should have 2 properties: a text and a value. The value should be the boolean you are looking for.
Now whenever the user changes the selected option, it will always be boolean.
new Vue({
el: '#app',
data: {
allowMultiple: true,
options: [
{text: 'Yes', value: true},
{text: 'No', value: false},
],
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div class="form-group">
<div>Allow multiple: {{allowMultiple}} [Type: {{typeof allowMultiple}}]</div><br>
<label for="">Allow Multiple</label>
<select class="form-control" v-model="allowMultiple">
<option v-for="option in options" :value="option.value">{{option.text}}</option>
</select>
</div>
</div>
The easier and quicker way I found that works for me is this:
<select id="selected" v-model="item.selected">
<option :value=0>No</option>
<option :value=1>Yes</option>
</select>
Maybe it's useful for anyone.
Try this:
<option value=1>Yes</option>
<option value=0>No</option>
I want to get value from select tag. So I bind a variable with v-model like below.
HTML:
<div id="action_panel">
<select id="work_type" v-model="type">
<option value="" disabled selected></option>
<option value="1">A</option>
<option value="2">B</option>
</select>
<div>
JS:
var vm = new Vue({
el: '#action_panel',
data: {},
methods: {
addWorks: function(emp_id) {
console.log(type);
}
}
});
console.log() returns the whole html entity of select tag.
I got no clues on vue.js doc.
The type variable is never declared. You should declare it as data of your application before using it.
https://jsfiddle.net/gurghet/mwy5uLb4/