Develop Reference

How to have the button span the whole width?

I am using Vuetify card with a layout and rendering some dynamic vuetify components inside of the card on checkbox selection which renders either a divider, a spacer, toolbar or button but i am not able to figure out how can i make the buttons span the entire width?
Basically the dynamic button should look like the button at the end rendering the entire width.
Please check this codepen.
Please check this working example:-
new Vue({
el: "#app",
data() {
return {
pricing: [{
text: "Actual price:",
value: "$17,000",
},
{
text: " Discount",
value: "$12,345",
}
],
elements: [{
title: "Divider",
value: "v-divider"
},
{
title: "Toolbar",
value: "v-toolbar"
},
{
title: "Button",
value: "v-btn"
}
],
selected: []
};
}
});
<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 rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<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 row>
<v-flex xs6>
<v-card>
<v-card-text>
<v-layout row justify-space-between v-for="option in pricing" :key="option.value" class="my-3">
<span :class="option.class">{{option.text}}</span>
<component v-for="(el, i) in selected" :key="i" :is="el.value"></component>
<span>{{option.value}}</span>
</v-layout>
<v-layout row justify-center>
<v-flex xs11>
<v-btn block>
Request
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<v-flex v-for="el in elements" :key="el.value">
<v-checkbox :value="el" v-model="selected" :label="el.title">
</v-checkbox>
</v-flex>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Any help will be appreciated. Thank you so much.

Use .flex.xs12 (12 = flex-basis: 100%;)
-or-
remove xs12 (And add button block attribute = flex: 1 0 auto;).
<!-- block buttons extend the full available width -->
<template>
<v-btn block>
Block Button
</v-btn>
</template>
https://vuetifyjs.com/en/components/buttons/#block

Adding values to an array inside hash in vue not working

I am trying add the feature to add multiple workers when clicked on Add worker. The issue I am facing here is that when I put workers array inside the management then this feature doesn't work. But if puts workers array outside the management hash then it works. But I want it to be inside the management issue. I am getting the error cannot read the property push.
<div v-for="(worker, index) in management.workers" :key="index">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right info-align">
<v-text-field
label='Name'
v-model="worker.name"
>
</v-text-field>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left info-align">
<v-text-field
label='Hours of work'
v-model="worker.hours_of_work"
>
</v-text-field>
</v-flex>
</v-layout>
<v-btn class="red-button next-btn" #click="deleteRow(index)">Delete</v-btn>
</v-container>
</div>
<v-btn class="red-button next-btn" #click="addRow">Add Workers</v-btn>
<script>
export default {
data () {
return {
management: {
workers: []
}
}
}
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index,1)
}
}
}
</script>

Code seems to work below:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
management: {
workers: []
}
}
},
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index, 1)
},
getRows(){
console.clear()
console.log(this.management.workers)
}
}
});
<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.2.20/dist/vuetify.min.css" rel="stylesheet" />
<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.2.20/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<div v-for="(worker, index) in management.workers" :key="index">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right info-align">
<v-text-field label='Name' v-model="worker.name">
</v-text-field>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left info-align">
<v-text-field label='Hours of work' v-model="worker.hours_of_work">
</v-text-field>
</v-flex>
</v-layout>
<v-btn class="red-button next-btn" #click="deleteRow(index)">Delete</v-btn>
</v-container>
</div>
<v-btn class="red-button next-btn" #click="addRow">Add Workers</v-btn>
<v-btn class="red-button next-btn" #click="getRows">View Workers</v-btn>
</v-app>
</div>

Vuetify table will not render when it is placed inside another component

I made a table component in my project as I have multiple tables that I want to all look the same.
I insert my table onto my page and everything is working fine.
On the table is a dialog which opens correctly but inside that dialog is another one of my table components and this does not render.
It will work if I change the name of the component and have two separate instances but that is not what I am trying to do.
How can I get my table working across all components? Using Vue CLI.
Table component:
<template>
<v-data-table :headers="headers" :items="items" :no-data-text="noDataText" :dark="dark">
<template v-slot:top>
<v-toolbar :dark="dark" flat>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn #click="dialog=true" color="success" class="mr-2">
Load Default Frames
<v-icon right>mdi-download</v-icon>
</v-btn>
<v-btn color="primary" class="mr-2">
Create New Frame
<v-icon right>mdi-image-plus</v-icon>
</v-btn>
<Dialog v-model="dialog" />
<!-- <Frame v-model="dialog" :editedFrame="editedFrame" :oldIndex="oldIndex" #close="close" />
<DefaultFrames v-model="defaultFramesDialog" :selectable="true" :items="defaultFrames" />-->
</v-toolbar>
</template>
</v-data-table>
</template>
Dialog component:
<template>
<v-dialog v-model="dialog">
<v-card :dark="dark">
<v-card-title>
{{ name}}
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn icon #click="dialog = false">
<!-- <v-icon #click="$emit('close')">mdi-close</v-icon> -->
</v-btn>
</v-card-title>
<Table :is="child_component" :headers="frameHeaders" :items="defaultFrames" />
<v-card-actions>
<v-btn #click="log">Log</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>

Table.vue
<template>
<v-btn #click.stop="emitOpenDialog">Open Dialog</v-btn>
</template>
<script>
export default {
methods: {
emitOpenDialog() {
// I've use vueBus for emiting
this.$bus.emit("open-dialog")
}
}
}
</script>
Dialog.vue
<template>
<v-dialog v-model="dialog"> ... </v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
},
created() {
this.$bus.on("open-dialog", this.openDialog)
},
beforeUnmount() {
this.$bus.off("open-dialog")
},
methods: {
openDialog() {
this.dialog = true
}
}
}

How to remove vuetify card on clicking a button

I have added a vuetify card and a button on it. I want that when the button is clicked, the card disappears. How can I do that?
Below is how my component looks like. I want to add a method to do so but don't know what the method will be.
<template>
<div class="notifications">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card flat color="green">
<v-card-title primary-title>
<div>
<h3 class="headline">Neu Benutzer angelegt</h3>
<div> {{ card_text }} </div>
</div>
</v-card-title>
<v-card-actions>
<div class="close"><v-btn #click="removeMessage(2)">Ok</v-btn></div>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data () {
return {
card_text: 'Success!'
}
},
methods: {
removeMessage(seconds) {
},
},
};
</script>

You can hide it with v-if and a boolean flag:
<template>
<div class="notifications" v-if="show">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card flat color="green">
<v-card-title primary-title>
<div>
<h3 class="headline">Neu Benutzer angelegt</h3>
<div> {{ card_text }} </div>
</div>
</v-card-title>
<v-card-actions>
<div class="close"><v-btn #click="removeMessage(2)">Ok</v-btn></div>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</div>
</template>
<script>
export default {
data () {
return {
card_text: 'Success!',
show:true;
}
},
methods: {
removeMessage(seconds) {
setTimeout(()=> this.show = false, seconds * 1000);
},
},
};
</script>

You can also use v-show and make something like this: CodePen

Open a dialog when there is an Error Vuetify. Open dialog condiotionally

I am using vuetify. I have a dialog and i want the dialog to open only when there is an error. I am calling a back-end service from my button which saves the product in the database but when there is an duplicate product it fails. Right now even if i am clicking on the button it opens the dialog with the error message. I want the dialog to only open when there is a duplicate product. So how can i open a dialog conditionally. Success dialog when there is a success and error dialog when there is an error.
<template>
<div>
<v-card v-show="createProducts">
<v-toolbar card prominent color="primary" dark>
<v-toolbar-title>Create Product</v-toolbar-title>
</v-toolbar>
<v-card-text>
{{ product }}
<v-form ref="form" v-model="valid" lazy-validation>
<v-container>
<v-layout row wrap>
<v-flex xs6>
<v-text-field
v-model="product.name"
label="Product Name"
v-validate="'required'"
required
solo=""
data-vv-name="product name"
:error-messages="errors.collect('product name')"
></v-text-field>
</v-flex>
<v-flex xs6>
<v-text-field
v-model="product.code"
label="Product Code"
v-validate="'required'"
required
solo=""
data-vv-name="product code"
:error-messages="errors.collect('product code')"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
v-model="product.description"
:auto-grow="true"
:box="false"
solo
:autofocus= "true"
:outline="false"
color="black"
background-color="white"
label="Product Description"
rows="3"
></v-textarea>
</v-flex>
<v-flex xs12>
<v-select
:items="dashboard"
label="Dashboard Template"
v-model="product.dashbaord"
data-vv-name="dashboard"
v-validate="'required'"
required
solo=""
:error-messages="errors.collect('template')"
></v-select>
</v-flex>
<!-- dialog box -->
<v-dialog v-model="dialog" width="500">
<v-btn slot="activator" color="primary" #click="createNewProduct" center>Save</v-btn>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>Error</v-card-title>
<v-card-text>Product Code already exists</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog= false">No</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</v-container>
</v-form>
</v-card-text>
</v-card>
</div>
</template>
<script>
import RestResource from "../services/dataService.js";
const service = new RestResource();
export default {
name: "createProducts",
data() {
return {
createProducts: true,
valid: true,
product: {},
dialog: false,
dashboard: [
"Template1",
"Template2",
"Template3",
"Template4",
"Template5",
"Template6"
]
}
},
methods: {
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
}).catch (e => {
alert("Failed..." + e);
})
// this.$router.push({ name: "products"});
}
}
},
};
</script>

You can set this.dialog = true to make dialog visible
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
var self = this
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
}).catch(e => {
alert("Failed..." + e);
self.dialog = true
})
// this.$router.push({ name: "products"});
}
}

I figured it out. We just have to use v-show in our v-cards and then set it to success or failure and call the the success or failure in our method depending on our need.
<template>
<div>
<v-card v-show="createProducts">
<v-toolbar card prominent color="primary" dark>
<v-toolbar-title>Create Product</v-toolbar-title>
</v-toolbar>
<v-card-text>
{{ product }}
<v-form ref="form" v-model="valid" lazy-validation>
<v-container>
<v-layout row wrap>
<v-flex xs6>
<v-text-field
v-model="product.name"
label="Product Name"
v-validate="'required'"
required
solo=""
data-vv-name="product name"
:error-messages="errors.collect('product name')"
></v-text-field>
</v-flex>
<v-flex xs6>
<v-text-field
v-model="product.code"
label="Product Code"
v-validate="'required'"
required
solo=""
data-vv-name="product code"
:error-messages="errors.collect('product code')"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
v-model="product.description"
:auto-grow="true"
:box="false"
solo
:autofocus= "false"
:outline="false"
color="black"
background-color="white"
label="Product Description"
rows="3"
></v-textarea>
</v-flex>
<v-flex xs12>
<v-select
:items="dashboard"
label="Dashboard Template"
v-model="product.dashbaord"
data-vv-name="dashboard"
v-validate="'required'"
required
solo=""
:error-messages="errors.collect('template')"
></v-select>
</v-flex>
<!-- dialog box -->
<v-dialog v-model="dialog" width="500">
<v-btn slot="activator" color="primary" #click="createNewProduct" center>Save</v-btn>
<!-- When product is successfully added -->
<v-card v-show="success">
<v-card-title class="headline grey lighten-2" primary-title>Success</v-card-title>
<v-card-text>Product Successfully Added</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="showProductList">Continue</v-btn>
</v-card-actions>
</v-card>
<!-- When there is an error -->
<v-card v-show="failure">
<v-card-title class="headline grey lighten-2" primary-title>Error</v-card-title>
<v-card-text>Product Code already exists</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog= false">No</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</v-container>
</v-form>
</v-card-text>
</v-card>
</div>
</template>
<script>
import RestResource from "../services/dataService.js";
const service = new RestResource();
export default {
name: "createProducts",
data() {
return {
createProducts: true,
valid: true,
product: {},
dialog: false,
success: false,
failure: false,
dashboard: [
"Template1",
"Template2",
"Template3",
"Template4",
"Template5",
"Template6"
]
}
},
methods: {
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
// this.success = true
this.$router.push({ name: "products"});
}).catch (e => {
alert("Failed..." + e);
this.failure = true
})
}
}
},
};
</script>