We Keep Coding

How to automatically select the first option in a dropdown menu in Vue 3

I have 2 dropdown menus, the second one changes values depending on the selection of the first dropdown.
All I want to do is set the first value of the second dropdown to be selected by default no matter what the option in the first dropdown is.
At the moment, the default selection of the second dropdown is always empty.
I tried fetching the values from types and loading them via v-for on the option tag and setting :selected="index===0" but it didn't work either.
Demo: https://codesandbox.io/s/relaxed-flower-2hjox1?file=/src/App.vue
The Template
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<div v-if="form.type === 'en-GB'">
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option value="Arsenal">Arsenal</option>
<option value="Chelsea">Chelsea</option>
<option value="Liverpool">Liverpool</option>
</select>
</div>
<div v-else-if="form.type === 'en-US'">
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option value="Lakers">Lakers</option>
<option value="Bulls">Bulls</option>
<option value="Mavericks">Mavericks</option>
</select>
</div>
</div>
Javascript
export default {
name: "App",
data() {
return {
form: {
type: 'en-GB',
selected: ''
},
types: {
american: ['Lakers', 'Bulls', 'Mavericks'],
british: ['Arsenal', 'Liverpool', 'Chelsea']
}
}
},
};

const app = Vue.createApp({
data() {
return {
form: {
type: "en-GB",
selected: "",
},
types: {
american: ["Lakers", "Bulls", "Mavericks"],
british: ["Arsenal", "Liverpool", "Chelsea"],
},
};
},
watch: {
'form.type': {
handler() {
this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
},
immediate: true
}
}
})
app.mount('#demo')
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<div v-if="form.type === 'en-GB'">
<select
id="selected"
name="selected"
class="form-select"
v-model="form.selected"
>
<option value="Arsenal">Arsenal</option>
<option value="Chelsea">Chelsea</option>
<option value="Liverpool">Liverpool</option>
</select>
</div>
<div v-else-if="form.type === 'en-US'">
<select
id="selected"
name="selected"
class="form-select"
v-model="form.selected"
>
<option value="Lakers">Lakers</option>
<option value="Bulls">Bulls</option>
<option value="Mavericks">Mavericks</option>
</select>
</div>
</div>
</div>
You can create watcher and set default values for second select:
watch: {
'form.type': {
handler() {
this.form.selected = this.form.type === "en-GB" ? this.types.british[0] : this.types.american[0]
},
immediate: true
}
}

All I want to do is set the first value of the second dropdown to be
selected by default no matter what the option in the first dropdown
is.
Add a watcher, which watches form.type, then pick the first item from types
Note, I've changed american key to the key your using for type, then you can loop over the options, if you don't have that in place you'll need mapping object anyway typeMap: {'en-US': 'american', 'en-GB': 'british' } ... types[typeMap[form.type]]
new Vue({
el: '#app',
data() {
return {
form: {
type: 'en-GB',
selected: ''
},
types: {
'en-US': ['Lakers', 'Bulls', 'Mavericks'],
'en-GB': ['Arsenal', 'Liverpool', 'Chelsea']
}
}
},
watch: {
'form.type' () {
this.form.selected = this.types[this.form.type][0]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="app">
<div class="col-md-6">
<label for="type" class="form-label">Type</label>
<select id="type" class="form-select" v-model="form.type">
<option value="en-US" selected>English (US)</option>
<option value="en-GB">English (British)</option>
</select>
</div>
<div class="col-md-6">
<label for="selected" class="form-label">Option 2</label>
<select id="selected" name="selected" class="form-select" v-model="form.selected">
<option v-for="name in types[form.type]">{{ name }}</option>
</select>
</div>
</div>

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

Laravel 5: Get the default value of my select option with onChange event using Vue js

I have a <select> that has 4 <option>s: Straight Line, Double Declining Balance, Unit of Production, and Sum of Years Digits. I'm having a hard time in the edit part because when I put the onChange event on my <select>, my default value doesn't show.
Here's what I tried: I used a v-if to set the default selected value of my <select>.
Edit.vue
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="form-group" v-if="asset_edit.asset_depreciation_id == 0">
<label>Asset Depreciation Method <span class="required-field">*</span></label>
<select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" #change="assetDepreciation" v-model="asset_depreciation">
<option value="0" selected>Straight Line</option>
<option value="1">Double Declining Balance</option>
<option value="2">Units of Production</option>
<option value="3">Sum of Years Digits</option>
</select>
</div>
<div class="form-group" v-else-if="asset_edit.asset_depreciation_id == 1">
<label>Asset Depreciation Method <span class="required-field">*</span></label>
<select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" #change="assetDepreciation" v-model="asset_depreciation">
<option value="0">Straight Line</option>
<option value="1" selected>Double Declining Balance</option>
<option value="2">Units of Production</option>
<option value="3">Sum of Years Digits</option>
</select>
</div>
<div class="form-group" v-else-if="asset_edit.asset_depreciation_id == 2">
<label>Asset Depreciation Method <span class="required-field">*</span></label>
<select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" #change="assetDepreciation" v-model="asset_depreciation">
<option value="0">Straight Line</option>
<option value="1">Double Declining Balance</option>
<option value="2" selected>Units of Production</option>
<option value="3">Sum of Years Digits</option>
</select>
</div>
<div class="form-group" v-else>
<label>Asset Depreciation Method <span class="required-field">*</span></label>
<select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" #change="assetDepreciation" v-model="asset_depreciation">
<option value="0">Straight Line</option>
<option value="1">Double Declining Balance</option>
<option value="2">Units of Production</option>
<option value="3" selected>Sum of Years Digits</option>
</select>
</div>
// In my add, this will appear then the asset depreciation mtehod is Unit of Production, thats why I used the if statement,
<div class="form-group periods" v-if="asset_edit.asset_depreciation_id == 2">
<label>Period</label>
<input type="number" class="form-control" name="periods" v-bind:value="asset_edit.period">
</div>
</div>
How do I set the default value of my <select> while also triggering a change event on the <select>?

The <select>'s value is already bound to v-model, so you don't need to conditionally render the <option>s in that manner. Instead, set the v-model variable to the value of the desired default <option> value, and the data binding will automatically select the <option>. The v-model could be set upon changes to asset_edit.asset_depreciation_id, using a watcher to monitor the changes:
export default {
props: {
asset_edit: {
type: Object,
default: () => ({})
}
},
data() {
return {
asset_depreciation: null
};
},
watch: {
"asset_edit.asset_depreciation_id": {
handler(value) {
this.asset_depreciation = value
},
immediate: true
}
}
}
Assuming the only reason for the default setting to also cause a change-event is to invoke assetDepreciation(), you could just call it inside the watcher:
watch: {
"asset_edit.asset_depreciation_id": {
handler(value) {
this.asset_depreciation = value
this.assetDepreciation(value) // invoke the select's change-handler
},
immediate: true
}
}

How to clear the select option on click to (x) button in Vue.js?

How do I create a function or button for a clear select option field? I try with
<input type="reset" value="x" />
but when I clear one field, all fields are cleared. I'm not sure if you need my code with basic select fields? I accept in any way

It can be solved manually using event handlers. Do:
<input value="x" #click="clearOneField" />
And in your methods hook inside script, implement your method:
clearOneField() {
this.field = null;
}

Let's take this example. You could do it using v-model:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<select v-model="select">
<option value="">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button v-on:click="clear">x</button>
</div>
<script>
new Vue({
el: '#app',
data: {
selectvalue: ''
}
})
</script>
fiddle: https://jsfiddle.net/vpqnh9dt/

#option:deselecting="deselecting"
add event deselecting

How to clear radio button on select box value change? VueJS2

I'm a newbie to JavaScript/VueJS and I need some help on clearing all radio inputs when a select box value (office code) is changed.
Here's my HTML/view code:
<div id="app">
<form id="myForm'>
<select id="office" v-model="selectedOffice" required>
<option value="" selected disabled>-Select-</option>
<option v-for="office in officeList" :value="office">{{office.code}}</option>
</select>
<section v-if="selectedOffice !== ''">
<h2>Please specify your product type:</h2>
<div id="productsList>
<label>
<input type="radio" name="productType" id="book" v-model="selectedProductType"> BOOKS
</label>
<label>
<input type="radio" name="productType" id="magazines" v-model="selectedProductType"> MAGAZINES
</label>
....snipped...
</form>
</div>
My model:
var vm = new Vue({
el: '#app',
data: {
selectedOffice: '',
selectedProductType: '',
officeList: [
{ code: 'Office1' }, {code: 'Office2' }, ...snipped...
]
I thought maybe I'd do create a method in the Vue instance like so:
methods: {
clearRadio: function(){
productType.prop('checked', false);
}
}
...but I am unsure how to implement that to the view (assuming that's the best way to do this) on office value change.
Thanks for any help!

You can do this using
#change
<template>
.....
<select #change="clearType" id="office" v-model="selectedOffice" required>
<option value="" selected disabled>-Select-</option>
<option v-for="office in officeList" :value="office">{{office.code}}</option>
</select>
.....
</template>
<script>
.....
methods: {
clearType: function(){
this.selectedProductType = ''
}
}
.....
</script>