Vue: Don't close dialog on invalid login

Viewed 20

I'm a complete beginner to Vue and I have an extremely basic question that is tripping me up.

I have a Dialog that opens up and asks for user input. When the user clicks okay, it makes a call to an API and tries to add the user input to a database. This works fine and I'm able to successfully hit the database. The issue I'm having is if the API doesn't return a 200. I want to persist the dialog and add text that says "Invalid Input. Try again." However, everything I've tried just closes the dialog automatically.

The code I have looks like:

           <v-dialog v-model="show" width="500">
              <template v-slot:activator="{ on, attrs }">
                <v-btn text color="green" v-bind="attrs" v-on="on"> Add User </v-btn>
              </template>
              <v-card>
                <v-card-title class="text-h5 grey lighten-2"> Add User </v-card-title>
                <v-spacer></v-spacer>
                <v-card-text>
                  <v-text-field label="User to add" v-model="addUser"></v-text-field>
                </v-card-text>
                <!-- <v-card-text v-if="successfullyAdded == false"><strong class="red--text text--lighten-1">Please input a valid username</strong></v-card-text> -->
                <v-spacer></v-spacer>
                <v-divider></v-divider>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn
                    color="primary"
                    text
                    @click="
                      show = false
                      addUser(index)
                    "
                  >
                    Add
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>

How do I persist a dialog conditionally such that it stays open if addUser returns False and otherwise closes normally?

0 Answers
Related