We Keep Coding

How to have add items in vuetify combobox and maintain v-model JSON structure

I have a vuetify combobox that I set the v-model equal to some JSON array that has a property "EMAIL_ADDRESS" with an associated email address. If I use items that are already in this v-model the data format matches the original JSON array I set its value too:
[
{
"EMAIL_ADDRESS": "testemail1#mail.com"
},
{
"EMAIL_ADDRESS": "testmail2#mail.com"
}
]
If I add a item to the combobox which can happen since its a send email form. The array does not maintain the v-model structure of the original items array as shown here:
[
{
"EMAIL_ADDRESS": "testemail1#mail.com"
},
"addedemail#mail.com",
"addedemail2#gmail.com"
]
Is there any way to maintain the structure of the items array so it actually pushes the new value to that array?
<v-combobox label="To"
v-model="emailToModel"
required
multiple
:items="emailTo"
item-text="EMAIL_ADDRESS"
class="ma-3"
filled
dense
return-object
hide-details="auto">
</v-combobox>

You can simply achieve it by iterating emailToModel array and based on the type check you can convert the string into an object and then pushed into a emailTo array.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
emailToModel: [
{
"EMAIL_ADDRESS": "testemail1#mail.com"
},
{
"EMAIL_ADDRESS": "testmail2#mail.com"
}
],
emailTo: []
}
},
mounted() {
this.emailTo = this.emailToModel
},
methods: {
getUpdatedValue() {
this.emailToModel = this.emailToModel.map(item => {
if (typeof item !== 'object') {
const newObj = {
"EMAIL_ADDRESS": item
};
item = newObj
this.emailTo.push(newObj);
}
return item;
})
console.log(this.emailToModel);
}
}
})
<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"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-combobox
label="To"
v-model="emailToModel"
item-text="EMAIL_ADDRESS"
:items="emailTo"
multiple
filled
dense
hide-details="auto"
#change="getUpdatedValue"
></v-combobox>
</v-container>
</v-app>
<pre>{{ emailToModel }}</pre>
</div>
Update : As per the author comment, creating a common generic method which will update the model and items value dynamically with irresepect to any number of combobox.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
emailToModel: [
{
"EMAIL_ADDRESS": "testemail1#mail.com"
},
{
"EMAIL_ADDRESS": "testmail2#mail.com"
}
],
emailCcModel: [
{
"EMAIL_ADDRESS": "testemailCc1#mail.com"
}
],
emailTo: [],
emailCc: []
}
},
mounted() {
this.emailTo = this.emailToModel
this.emailCc = this.emailCcModel
},
methods: {
getUpdatedValue(modelValue, comboboxItems) {
this[modelValue] = this[modelValue].map(item => {
if (typeof item !== 'object') {
const newObj = {
"EMAIL_ADDRESS": item
};
item = newObj
this[comboboxItems].push(newObj);
}
return item;
})
}
}
})
<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"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-combobox
label="To"
v-model="emailToModel"
item-text="EMAIL_ADDRESS"
:items="emailTo"
multiple
filled
dense
hide-details="auto"
#change="getUpdatedValue('emailToModel', 'emailTo')"
></v-combobox>
</v-container>
<v-container fluid>
<v-combobox
label="Cc"
v-model="emailCcModel"
item-text="EMAIL_ADDRESS"
:items="emailCc"
multiple
filled
dense
hide-details="auto"
#change="getUpdatedValue('emailCcModel', 'emailCc')"
></v-combobox>
</v-container>
</v-app>
</div>

vuetify - change the v-select items depending on the state of a button

So I am trying to make the selector have different items depending on the state of a button that already changes between Enabled and Disabled. I tried to use v-if and v-else but I feel that is the wrong way to go about it and also was not working. I feel this is closer to what I need to use but am not sure I'm doing it right.
below is the html
<v-col class="col-3">
<v-select
:items="rulesForOptionsLevel"
outlined
dense
:disabled="
accountFeatures.optionsTrading === 'Disabled' ? true : false
"
v-model="accountFeatures.optionsLevel"
#change="changeOptionsLevel"
:menu-props="{ top: true, offsetY: true }"
label="Level"
></v-select>
</v-col>
this is the script below. Also in the script I made an items[] empty in data
methods: {
rulesForOptionsLevel() {
if (accountFeatures.equityTrading === "Disabled") {
items: ["unavailable", "optionsLevel1", "optionsLevel2"];
} else {
items: [
"unavailable",
"optionsLevel1",
"optionsLevel2",
"optionsLevel3",
"optionsLevel4",
"optionsLevel5",
"optionsLevel6",
];
}
},

Simple change the rulesForOptionsLevel method to a computed property.
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
accountFeatures: {
optionsTrading: "disabled",
optionsLevel: "",
equityTrading: "Disabled"
}
};
},
methods: {
changeOptionsLevel() {
console.log('Options changed!');
},
toggleEquityTrading(){
if(this.accountFeatures.equityTrading=="Enabled")
this.accountFeatures.equityTrading = "Disabled";
else
this.accountFeatures.equityTrading = "Enabled";
console.log(`accountFeatures.equityTrading: ${this.accountFeatures.equityTrading}`);
}
},
computed: {
rulesForOptionsLevel() {
if (this.accountFeatures.equityTrading === "Disabled")
return ["unavailable", "optionsLevel1", "optionsLevel2"];
else
return [
"unavailable",
"optionsLevel1",
"optionsLevel2",
"optionsLevel3",
"optionsLevel4",
"optionsLevel5",
"optionsLevel6",
];
},
},
});
<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#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<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>
<div id="app">
<v-app>
<v-col class="col-3">
<v-select :items="rulesForOptionsLevel" outlined dense :disabled="accountFeatures.optionsTrading === 'Disabled' ? true : false" v-model="accountFeatures.optionsLevel" #change="changeOptionsLevel" :menu-props="{ top: true, offsetY: true }" label="Level"></v-select>
</v-col>
<v-btn elevation="2" #click="toggleEquityTrading()">Toggle Equity</v-btn>
</v-app>
</div>

figured it out. No need for the function you can simply use the same method as for something like disabled. If that accountFeatures.margin equals disabled then it chooses items and if not then it chooses items2
] <v-select
:items="accountFeatures.margin === 'Disabled' ? items : items2"
outlined
dense
:disabled="
accountFeatures.optionsTrading === 'Disabled' ? true : false
"
v-model="accountFeatures.optionsLevel"
#change="changeOptionsLevel"
:menu-props="{ top: true, offsetY: true }"
label="Level"
></v-select>

Compile Vuetify tags/template received as prop in runtime

I want to send a 'template' prop to a component then render it. If I send a plain HTML it works, but if I send a Vuetify tag like <v-btn>test</v-btn> the template does not get compiled.
I know i shouldn't pass a template via props, but this is a specific case: The parent component works as a "template builder" and the child components works as the "result viewer", so I have to pass the created template to the child so that it can compile and show it.
Here's what I've been trying:
main.js
import Vue from 'vue'
import App from './App.vue'
// Some imports here ...
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
<script>
import Vue from 'vue'
// eslint-disable-next-line
var staticRenderFns = [];
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.templateRender) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return this.templateRender();
}
},
watch: {
// Every time the template prop changes, I recompile it to update the DOM
template:{
immediate: true, // makes the watcher fire on first render, too.
handler() {
var res = Vue.compile(this.template);
this.templateRender = res.render;
// staticRenderFns belong into $options,
// appearantly
this.$options.staticRenderFns = []
// clean the cache of static elements
// this is a cache with the results from the staticRenderFns
this._staticTrees = []
// Fill it with the new staticRenderFns
for (var i in res.staticRenderFns) {
//staticRenderFns.push(res.staticRenderFns[i]);
this.$options.staticRenderFns.push(res.staticRenderFns[i])
}
}
}
},
}
export default {
name: 'App',
data: () => ({
template:`
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components:{
dynamic,
},
};
</script>
<template>
<v-app id="app" style="padding-top: 64px;">
<v-app-bar
app
color="blue"
>
<v-btn depressed color="white" class="black--text" click="addBtn">Button</v-btn>
</v-app-bar>
<dynamic :template='template'></dynamic>
</v-app>
</template>

Inside the dynamic component try to render a vue component using the passed template :
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {template:this.template}));
}
},
}
Full Example
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {
template: this.template
}));
}
},
}
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
count: 1,
template: `
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components: {
dynamic,
},
methods: {
changeContent() {
this.count = this.count + 1
this.template = '';
setTimeout(() => { //simulate loading status
this.template = `<v-col>
<v-btn class="pa-2 primary white--text">Btn ${this.count}</v-btn>
</v-col>`
}, 2000);
}
}
})
<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#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn depressed color="primary" class="black--text" #click="changeContent">change content</v-btn>
<dynamic :template='template'></dynamic>
</v-app>
</div>

Toggle object property VueJS?

I have an array cars which returns me the names and each of them has a property starred which i want to toggle true and false back and forth. However i want to set starred to true for only one of them at a time. So i created a method setStarred and inside the method, i am using a map to set others to false. However i am able to set the starred to true however i am not able to set it back to false.
Please check this Codepen
This is working example
new Vue({
el: "#app",
data() {
return {
cars: [{
name: "Toyota",
starred: false
},
{
name: "BMW",
starred: false
},
{
name: "Ford",
starred: false
}
]
};
},
methods: {
setStarred(index) {
this.cars.map((i) => {
i.starred = false;
});
this.cars[index].starred = !this.cars[index].starred;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(index)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Essentially i am trying to set the selected back to false. Any help will be appreciated. Thank you

Try this:
this.cars[index].starred = !this.cars[index].starred;
this.cars.map((i) => {
if(i.name!=this.cars[index].name)
i.starred = false;
});

I prefer saving the 'starred' state of the target first, then toggle it later.
If so, you don't need to put one if statement in the for-loop. Though in this case, it doesn't improve the performance a lot, but I believe avoid too many if from for-loop is one good habit.
Below is the example:
new Vue({
el: "#app",
data() {
return {
cars: [{
name: "Toyota",
starred: false
},
{
name: "BMW",
starred: false
},
{
name: "Ford",
starred: false
}
]
};
},
methods: {
setStarred(index) {
let cur = this.cars[index].starred
this.cars.forEach((i) => {
i.starred = false;
});
this.cars[index].starred = !cur;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center column>
<v-flex xs6 v-for="(car,index) in cars" :key="index">
<h2>{{car.name}}
<v-icon :color="car.starred ? 'primary': '' " #click="setStarred(index)">star_border
</v-icon>
</h2>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>

Passing props from one step to another (steppers) in Vue

I am using steppers in vue. I am creating an agency in step 1 and on step 2 I am displaying the agency details. The issue is that the agency details don't appear on step 2 until I refresh page after going on step 2. Is there a way to pass agency as a prop from agency.vue to event.vue so that I dont need to refresh the page to make the agency details appear on step 2.
stepper.vue
<template>
<div >
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1">Agency</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2">Event</v-stepper-step>
<v-divider></v-divider>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<Agency #next="goTo(2, true)"></Agency>
</v-stepper-content>
<v-stepper-content step="2">
<Event/>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</div>
</template>
<script>
import Agency from 'parties/agency';
import Event from 'events/event';
export default {
components: {
Agency,
Event
},
data () {
return {
e1: 0,
agency: {
id: '',
name: '',
phone_number: ''
}
}
},
created() {
this.step = 1;
this.getAgency();
},
methods: {
getAgency() {
this.$axios.get('/agency.json')
.then(response => {
if (Object.keys(response.data).length > 0) {
this.agency = response.data;
}
})
},
goTo(step, can) {
if (can) {
this.e1 = step;
}
},
}
};
</script>
agency.vue
<template>
<v-card>
<v-form :model='agency'>
<v-layout row wrap>
<v-flex xs12 sm12 lg12 >
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field
label='Agency Name'
v-model='agency.name'>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field
label='Agency Phone Number'
v-model='agency.phone_number'>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<div>
<v-btn #click.prevent='saveAgency'>Save</v-btn>
</div>
</v-layout>
</v-flex>
</v-layout>
</v-form>
<v-btn #click.prevent='nextStep'>
Next
</v-btn>
</v-card>
</template>
<script>
export default {
data: function () {
return {
agency: {
id: '',
name: '',
phone_number: ''
}
};
},
created: function() {
this.getAgency();
},
methods: {
nextStep() {
this.$emit('next');
},
getAgency() {
this.$axios.get('/agency.json')
.then(response => {
if (Object.keys(response.data).length > 0) {
this.agency = response.data;
}
})
},
saveAgency() {
this.$axios.post('/agencies.json', { agency: this.agency })
.then(response => {
});
},
}
};
</script>
event.vue
<template>
<v-card class="mb-12">
<v-form :model='agency'>
{{ agency.name }}<br/>
{{ agency.phone_number }}<br/>
</v-form>
</v-card>
</template>
<script>
export default {
data: function () {
return {
agency: {
id: '',
name: '',
phone_number: ''
},
event_final: false
};
},
created: function() {
this.getAgency();
},
methods: {
getAgency() {
this.$axios.get('/agency.json')
.then(response => {
if (Object.keys(response.data).length > 0) {
this.agency = response.data;
if (this.agency.name === "XYZ") {
this.event_final = true;
}
}
}).
then(() => {
});
},
}
};
</script>

Have Agency emit the details in its next event, capture them at the parent and pass them as a prop to Event.
Given you load the initial data in stepper.vue, you can also pass that into Agency for editing
For example
// agency.vue
props: { editAgency: Object },
data () {
return { agency: this.editAgency } // initialise with prop data
},
methods: {
nextStep() {
this.$emit('next', { ...this.agency }) // using spread to break references
},
// etc, no need for getAgency() here though
}
<!-- stepper.vue -->
<Agency :edit-agency="agency" #next="nextAgency"></Agency>
<!-- snip -->
<Event :agency="agency" />
// stepper.vue
methods: {
nextAgency (agency) {
this.agency = agency
this.goTo(2, true)
},
// event.vue
export default {
props: { agency: Object } // no need for a local "data" copy of agency, just use the prop
}