I am currently implementing vuetify into my project. The main issue I am facing is related to the dialog component, which I only want to open in case of an error. The scenario involves a button calling a backend service to save a product in the database, and if a duplicate product is detected, it fails. However, at the moment, the dialog opens with the error message every time the button is clicked. My goal is to have the dialog open conditionally - displaying a success dialog upon success and an 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>
<!-- Conditional 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 validation = await this.$validator.validateAll();
console.log(`validation :: ${validation}`)
if (validation) {
let response = await service.createProduct(this.product).then(result => {
alert("Done..." + result);
}).catch (error => {
alert("Failed..." + error);
})
// this.$router.push({ name: "products"});
}
}
},
};
</script>