出现错误提示时，打开一个对话框。选择打开对话框

Question

我正在使用vuetify。我有一个对话框，我只想在出现错误时打开对话框。我正在从我的按钮调用后端服务，该服务将产品保存在数据库中，但是当有重复的产品时它将失败。现在，即使我单击按钮，它也会打开带有错误消息的对话框。我希望仅在有重复产品时才打开对话框。因此，我该如何有条件地打开一个对话框。成功时显示成功对话框，错误时显示错误对话框。

 class Page1 extends Component{    
    changeTitle =()=>{
     this.props.actions.changeTitle("title from Page1")
    }
    render(){
    return (
    <div>
    <button onClick={this.changeTitle}>changeTitle</button>
    </div>
    )
    }
    const mapDispatchToProps = (dispatch)=> {
        return {
            actions: bindActionCreators({ changeTitle }, dispatch)
        }
    }
    export default connect(null, mapDispatchToProps)(Page1)

Answer 1

您可以设置inferior-ess-r-reload-hook使对话框可见

C-c C-e C-r

Answer 2

我知道了。我们只需要在v卡中使用v-show，然后将其设置为成功或失败，然后根据需要调用方法中的成功或失败。

<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>