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 >
<v-row no-gutters >
<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
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
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>
CodePudding user response：
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"
CodePudding user response：
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>