<div id="app">
<v-app>
<v-content>
<v-container>
<v-row>
<v-alert v-model="alert" border="left" close-text="Close Alert" :type="alertType" dark>{{ alertText }}
</v-alert>
</v-row>
<v-form ref="myform" v-model="formValidity">
<v-row>
<v-text-field v-model="first_name" :rules="[rules.required]" solo label="First Name">
</v-row>
<v-row>
<v-text-field v-model="last_name" :rules="requiredIfFirstName" solo label="Last Name">
</v-row>
</v-text-field>
<v-row>
<v-spacer></v-spacer>
<v-btn color="success" @click="validate">Submit</v-btn>
</v-row>
</v-form>
</v-container>
</v-content>
</v-app>
</div>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: () => ({
formValidity: true,
first_name: "",
last_name: "",
rules: {
required: (value) => !!value || "Required."
},
alertText: "",
alert: false,
alertType: "error"
}),
computed: {
requiredIfFirstName() {
return [
(v) => {
if (this.first_name === "Prasad" && !v) {
console.log("1");
return "Last Name is required";
}
return true;
}
];
}
},
methods: {
validate: function () {
if (this.$refs.myform.validate()) {
this.alertText = "Form is Valid!";
this.alertType = "success";
this.alert = true;
} else {
this.alertText = "Form is NOT Valid!";
this.alertType = "error";
this.alert = true;
}
}
}
});
