<v-form class="pa-4" v-model="valid" ref="form">
<v-row no-gutters dense>
<v-col cols="3" class="mt-2">
<v-subheader
><span class="red--text">*</span>
{
{
$t("account.label.login_name") }}</v-subheader
>
</v-col>
<v-col cols="9">
<v-text-field
v-model="defaultVal"
placeholder="无默认值"
:append-icon="defaultVal ? 'mdi-close-circle' : null"
@click:append="clearDefaultVal"
required
:rules="rules.isFull"
rows="1"
class="loginname"
></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" class="text-center">
<v-btn elevation="4" medium color="primary" @click="submit">
{
{
displayType === "CREATE" ? "新建" : "修改" }}</v-btn
>
</v-col>
</v-row>
</v-form>
export default {
data() {
return {
form: {
},
rules: {
isFull: [v => !!v || "此项为必填项"]
}
}
},
methods:{
submit() {
if (this.$refs.form.validate()) {
this.displayType === "CREATE" ? this.toCreate() : this.toEdit();
}
},
toCreate(){
},
toEdit(){
},
}
}
Vuetify——form表单验证
おすすめ
転載: blog.csdn.net/Kiruthika/article/details/121025458
ランキング