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/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.6.4/dist/vuetify.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/vuetify#2.6.4/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.
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"
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/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.6/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>
Related
Hi everyone I'm doing this project where I'm going to store data into a table. The data itself is from a backend server with different table which have a different field name but meant to be stored in one same column on the front-end.
The first data will be like:
{
student_name: "John Doe",
birthday: "Aug, 4 2008"
}
And the second data will be like:
{
name: "Jane Doe",
birthday: "Dec, 25 2003"
}
and this is the code I tried but obviously didn't work:
<template>
<b-table>
<template v-slot:cell(name)=data items="student_data" :fields="fields">
<div class="text-truncate" style="max-width: 150px;">
{{data.name}}
</div>
</template>
</b-table>
</template>
<script>
export default {
data(){
return {
student_data: [
{
student_name: "John Doe",
birthday: "Aug, 4 2008"
},
{
name: "Jane Doe",
birthday: "Dec, 25 2003"
},
],
fields: [
{
key: "no",
label: "No",
sortable: false
},
{
key: ["student_name", "name"],
label: "Name",
sortable: true
},
{
key: "birthday",
label: "Birthday",
sortable: true
},
]
}
}
}
</script>
How can I put both John doe and Jane Doe in one same column with their different field name? Thanks in advance
You can simply achieve it by just iterating the array in mounted() hook and making the Object keys with same name.
Live Demo :
new Vue({
el: '#app',
data: {
items: [
{
student_name: "John Doe",
birthday: "Aug, 4 2008"
},
{
name: "Jane Doe",
birthday: "Dec, 25 2003"
}
]
},
mounted() {
this.items.forEach(obj => {
if (obj.hasOwnProperty('name')) {
obj['student_name'] = obj['name'];
delete obj['name'];
}
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue#2.0.0-rc.11/dist/bootstrap-vue.common.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.css"/>
<div id="app">
<b-container class="mt-2">
<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
</b-container>
</div>
I'm new to Vue and i'm dealing with datatables. I'm using Vuetify's datatables to create a component that, on page load, sends a request to my backend, receives some data and shows that data on a datatable.
This is my current code:
<template>
<v-data-table
:headers="headers"
:items="balances"
:items-per-page="5"
class="elevation-1"
></v-data-table>
</template>
<script>
export default {
data() {
return {
search: '',
headers: [
{ text: 'Asset', value: 'symbol' },
{ text: 'Amount', value: 'amount' },
],
balances: [],
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
fetch('MYURL')
.then(response => response.json())
.then(data => {
this.balances = data;
})
}
}
}
</script>
The problem i'm facing now is adding a button to each row in the table, and this button should send a request to my backend with that row's data, so i need to add a button that, when clicked, can fetch the row's data. Is there any way to do that? I tried looking into Vuetify's docs but i didn't found much about a task like this one.
You can add a new column, set value to action for example, and add a slot in the table as follows:
new Vue({
el:"#app",
vuetify: new Vuetify(),
data() {
return {
search: '',
headers: [
{ text: 'Asset', value: 'symbol' },
{ text: 'Amount', value: 'amount' },
{ text: 'Send', value: 'action' }
],
balances: [
{ symbol: "$", amount: 100 },
{ symbol: "$", amount: 200 },
],
}
},
methods: {
sendRequest(rowData) {
console.log(rowData)
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<v-app id="app">
<v-data-table
:headers="headers"
:items="balances"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.action="{ item }">
<v-btn #click="sendRequest(item)">
Send
</v-btn>
</template>
</v-data-table>
</v-app>
I have an option array which is shown in the multi-select options. But I need to select a default option which id is provided. In my code I need to select the default option which id = 2 . How to do that with multi-select in vue.js?
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-multiselect#2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.0/dist/vue-multiselect.min.css">
<div id="vue-app2">
<div>
<label class="typo__label">Single select / dropdown</label>
<multiselect v-model="value" deselect-label="Can't remove this value" track-by="id" label="name"
placeholder="Select one" :options="options" :searchable="false" :allow-empty="false">
<template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong> is written
in<strong> {{ option.language }}</strong></template>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</div>
<script >
Vue.component('multiselect', window.VueMultiselect.default);
new Vue({
el: '#vue-app2',
data: {
id:2,
value:null,
options: [
{ id:1, name: 'Vue.js', language: 'JavaScript' },
{ id:2, name: 'Rails', language: 'Ruby' },
{ id:3,name: 'Sinatra', language: 'Ruby' },
{ id:4,name: 'Laravel', language: 'PHP', $isDisabled: true },
{ id:5,name: 'Phoenix', language: 'Elixir' }
]
}
});
</script>
If you need to take default value id from data then find and set default value on mounted;
new Vue({
el: '#vue-app2',
data: {
id: 2,
value: null,
options: [
{ id: 1, name: 'Vue.js', language: 'JavaScript' },
{ id: 2, name: 'Rails', language: 'Ruby' },
{ id: 3, name: 'Sinatra', language: 'Ruby' },
{ id: 4, name: 'Laravel', language: 'PHP', $isDisabled: true },
{ id: 5, name: 'Phoenix', language: 'Elixir' }
]
},
mounted() {
this.value = this.options.find(option => option.id === this.id);
}
});
I have populated a data variable with an array, and can access its contents by using a v-for in the html, but I can't access any of the data in the variable within the script, and I don't know why.
var result = [{
"CatalogName": "Retro Doors",
"ItemName": "French Doors",
"ItemListPrice": "$461.00",
"ItemType": "Oak",
"ItemFeatures": [{
"Features": "Door Quantity",
"QTY": 2
},
{
"Features": "Door Hinges",
"QTY": 4
},
{
"Features": "Door Knobs",
"QTY": 1
},
{
"Features": "Door Looks",
"QTY": 1
},
{
"Features": "Glass Panes",
"QTY": 2
}
]
}];
new Vue({
el: '#app',
beforeCreate: function() {
console.log("Before Created");
},
created: function() {
console.log("Created");
this.GetItemsList();
},
beforeMount: function() {
console.log("Before Mount");
},
data: {
itemPriceList: []
},
methods: {
GetItemsList() {
this.itemPriceList = result;
}
},
mounted: function() {
console.log("Mounted");
console.log(this.ItemPriceList);
}
});
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
{{ itemPriceList[0].CatalogName }}
<div v-for="item in itemPriceList">
{{ item.ItemName }}
<div v-for="items in item.ItemFeatures">
{{ items.Features }} : {{ items.QTY }}
</div>
</div>
</div>
You have a typo in a variable name inside mounted hook - used with capital I.
In data: itemPriceList
In mounted hook: this.ItemPriceList
Should be the same as defined inside data property.
I'm trying to show "locations" in a vuetify select component, but my current code renders "[object Object]" instead of Location 1, Location 2, etc.
My select component:
<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
></v-select>
Locations:
locations () {
return this.$store.getters.getLocationsForEvent(this.event.id)
}
Vuex Getter:
getLocationsForEvent: (state) => (id) => {
return state.loadedLocations.filter(function (location) {
return location.eventId === id;
});
}
Here is a screenshot of what the location data looks like:
Thanks!
For custom objects you have to specify the item-text. The item-text is what each option will display.
From your screenshot, for instance, title is a possible property:
<v-select
:items="locations"
v-model="location"
label="Choose Location"
item-text="title"
bottom
autocomplete
></v-select>
Demos below.
Without item-text:
new Vue({
el: '#app',
data () {
return {
location: null,
locations: [
{ id: "1111", manager: 'Alice', title: 'Water Cart 1' },
{ id: "2222", manager: 'Bob', title: 'Water Cart 2' },
{ id: "3333", manager: 'Neysa', title: 'Water Cart 3' }
]
}
}
})
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify#1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify#1.0.10/dist/vuetify.min.js'></script>
<div id="app">
<v-app>
<v-container>
<v-select
:items="locations"
v-model="location"
label="Choose Location"
bottom
autocomplete
>
</v-select>
</v-container>
</v-app>
</div>
With item-text:
new Vue({
el: '#app',
data () {
return {
location: null,
locations: [
{ id: "1111", manager: 'Alice', title: 'Water Cart 1' },
{ id: "2222", manager: 'Bob', title: 'Water Cart 2' },
{ id: "3333", manager: 'Neysa', title: 'Water Cart 3' }
]
}
}
})
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet' href='https://unpkg.com/vuetify#1.0.10/dist/vuetify.min.css'>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify#1.0.10/dist/vuetify.min.js'></script>
<div id="app">
<v-app>
<v-container>
<v-select
:items="locations"
v-model="location"
label="Choose Location"
item-text="title"
bottom
autocomplete
>
</v-select>
</v-container>
</v-app>
</div>
implemeneted a watch to have a low level Array of objects
watch: {
groupInfo: function(groupInfo) {
if (groupInfo.teams !== undefined) {
var newArray = [];
for (var key in groupInfo.teams) {
var obj = groupInfo.teams[key];
newArray.push(obj);
}
console.log("wagwan" newArray)
this.teams = newArray;
}
}
},