'v-select display different item-text on clicking drop down
The question is related to v-select and specifically on how I can show different value when a drop down is clicked. Below is my code and I've a drop down with country & code info. When a dropdown is selected, I would like the 'country' value to be displayed (eg., Austria (+43) but a value is selected, I'd like the 'code' value to be displayed (eg., +43 instead of Austria (+43)). How do I change this? I tried using 'onchange' event but couldn't figure out. Any guidance is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"
/>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-content>
<v-container fluid class="w-[680px]">
<v-row no-gutters class="pt-[15px]">
<v-col cols="2" sm="1" md="2" lg="1" xl="1"> </v-col>
<v-col align-self="center" cols="2" sm="1" md="2" lg="1" xl="1">
<v-select
class="text-blue"
v-model="selectedCountry"
:items="countryList"
item-text="country"
item-value="code"
return-object
single-line
v-on:change="countryChange"
></v-select>
</v-col>
<v-col align-self="center">
<v-text-field
class="text-blue"
length="10"
filled
rounded
></v-text-field>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
selectedCountry: { country: "United States (+1)", code: "+1" },
countryList: [
{ country: "United States (+1)", code: "+1" },
{ country: "Canada (+1)", code: "+1c" },
{ country: "Australia (+61)", code: "+61" },
{ country: "Austria (+43)", code: "+43" },
{ country: "Belgium (+32)", code: "+32" },
{ country: "Bulgaria (+359)", code: "+359" },
{ country: "Croatia (+385)", code: "+385" },
{ country: "Cyprus (+357)", code: "+357" },
{ country: "Czech Republic (+420)", code: "+420" },
{ country: "Denmark (+45)", code: "+45" },
{ country: "Estonia (+372)", code: "+372" },
{ country: "Finland (+358)", code: "+358" },
{ country: "France (+33)", code: "+33" },
{ country: "Germany (+49)", code: "+49" },
{ country: "Greece (+30)", code: "+30" },
{ country: "Hungary (+36)", code: "+36" },
{ country: "Ireland (+353)", code: "+353" },
{ country: "Italy (+39)", code: "+39" },
{ country: "Latvia (+371)", code: "+371" },
{ country: "Lithuania (+370)", code: "+370" },
{ country: "Luxembourg (+352)", code: "+352" },
{ country: "Malta (+356)", code: "+356" },
{ country: "Mexico (+52)", code: "+52" },
{ country: "Netherlands (+31)", code: "+31" },
{ country: "New Zealand (+64)", code: "+64" },
{ country: "Poland (+48)", code: "+48" },
{ country: "Portugal (+351)", code: "+351" },
{ country: "Romania (+40)", code: "+40" },
{ country: "Singapore (+65)", code: "+65" },
{ country: "Slovakia (+421)", code: "+421" },
{ country: "Slovenia (+386)", code: "+386" },
{ country: "South Africa (+27)", code: "+27" },
{ country: "Spain (+34)", code: "+34" },
{ country: "Sweden (+46)", code: "+46" },
{ country: "United Kingdom (+44)", code: "+44" },
{ country: "Other (+0)", code: "+0" }
],
};
},
methods: {
countryChange(o) {
console.log(this);
console.log(this.$el.outerText);
console.log(o.code);
console.log(o.country);
console.log(o);
},
},
computed: {},
beforeMount() {},
});
</script>
</body>
</html>
[Update]: To provide an example, I'm taking this Maz-ui component that when clicked shows the complete country information in dropdown BUT shows only country code +1 in the field once selected. This basically is because the item-text is changed to +1 instead of United States on selection completion. How do I achieve this? I tried using onchange function to change the item-text to 'selectedCountry.code' instead of country - didn't seem to work.
Solution 1:[1]
You are using vuetify v-select component. It takes array of strings or array of objects like what you are using in code above.
item-text prop takes the property to display.
item-value takes property to return as a value when the option is selected.
You are using return-object as well which will return the whole object instead of the item-value
Finally to show +43 instead of Austria (+43) you have to change item-text to code instead of country
Like this item-text="code"
Solution 2:[2]
You can achieve this with one workaround, In the dropdown you can show the code and on select you can show the country as a hint by using :hint keyword and vice versa.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
countryList: [
{ country: "United States (+1)", code: "+1" },
{ country: "Canada (+1)", code: "+1c" },
{ country: "Australia (+61)", code: "+61" },
{ country: "Austria (+43)", code: "+43" },
{ country: "Belgium (+32)", code: "+32" },
{ country: "Bulgaria (+359)", code: "+359" },
{ country: "Croatia (+385)", code: "+385" },
{ country: "Cyprus (+357)", code: "+357" },
{ country: "Czech Republic (+420)", code: "+420" },
{ country: "Denmark (+45)", code: "+45" },
{ country: "Estonia (+372)", code: "+372" },
{ country: "Finland (+358)", code: "+358" },
{ country: "France (+33)", code: "+33" },
{ country: "Germany (+49)", code: "+49" },
{ country: "Greece (+30)", code: "+30" },
{ country: "Hungary (+36)", code: "+36" },
{ country: "Ireland (+353)", code: "+353" },
{ country: "Italy (+39)", code: "+39" },
{ country: "Latvia (+371)", code: "+371" },
{ country: "Lithuania (+370)", code: "+370" },
{ country: "Luxembourg (+352)", code: "+352" },
{ country: "Malta (+356)", code: "+356" },
{ country: "Mexico (+52)", code: "+52" },
{ country: "Netherlands (+31)", code: "+31" },
{ country: "New Zealand (+64)", code: "+64" },
{ country: "Poland (+48)", code: "+48" },
{ country: "Portugal (+351)", code: "+351" },
{ country: "Romania (+40)", code: "+40" },
{ country: "Singapore (+65)", code: "+65" },
{ country: "Slovakia (+421)", code: "+421" },
{ country: "Slovenia (+386)", code: "+386" },
{ country: "South Africa (+27)", code: "+27" },
{ country: "Spain (+34)", code: "+34" },
{ country: "Sweden (+46)", code: "+46" },
{ country: "United Kingdom (+44)", code: "+44" },
{ country: "Other (+0)", code: "+0" }
],
selectedCountry: null
}),
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-select
:items="countryList"
v-model="selectedCountry"
label="Select Country Code"
item-text="code"
return-object
:hint="selectedCountry?.country.split('(')[0].trim()"
outlined
></v-select>
</v-container>
</v-app>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Rohìt JÃndal |