In this simple HTML code, the user is notified of any cell they have left empty, when the press Submit.
<form>
<input type="text" name="usrname" required>
<input type="text" name="usrname" required>
<input type="submit">
</form>I am trying to achieve a similar effect in my Vue code. Can you advise on a method that avoids the if-else?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<b-form @submit="onSubmit">
<b-row>
<b-col>
<v-combobox v-model="answer.type_a" :items="type_a" label="a" multiple ref="type_a">
</v-combobox>
</b-col>
<b-col>
<v-combobox v-model="answer.type_b" :items="type_b" label="b" multiple ref="type_b">
</v-combobox>
</b-col>
</b-row>
<v-btn type="submit" color="primary">Submit</v-btn>
</b-form>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
</body>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
type_a: ["a", "b"],
type_b: ["c","d"],
answer: {
type_a: "",
type_b: "",
},
}),
methods: {
focusInput: function(inputRef) {
this.$refs[inputRef].focus();
},
onSubmit(evt) {
evt.preventDefault();
if ((!this.answer.type_a, !this.answer.type_b)) {
if (!this.answer.type_a) {
this.focusInput("type_a");
return true;
}
if (!this.answer.type_b) {
this.focusInput("type_b");
return true;
}
} else {
axios.post("", this.answer)
.then(() => {
alert("SUCCESS!!");
})
.catch(() => {
alert("FAILURE!!");
})
}
}
}
})
</script>
</html>Is there anyone who can make some examples for me?
Aucun commentaire:
Enregistrer un commentaire