[Vuejs]-Open a dialog when there is an Error Vuetify. Open dialog condiotionally

by

0👍

✅

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>

0👍

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"});    
  }
}

Leave a comment