我有一個下拉選單，我想進行驗證。
所以這是我的下拉組件：
<template>
<div :tabindex="tabindex" @blur="open = false">
<div : @click="open = !open">
{{ selected.name }}
</div>
<div :>
<div v-if="defaultValue != ''">{{defaultValue}}</div>
<div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);">
{{ option.name }}
</div>
</div>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true,
},
defaultValue: {
type: String,
required: false,
default: "Choose an option",
},
tabindex: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
open: false,
selected: this.setDefaultValue(),
};
},
mounted() {
this.$emit("input", this.selected);
},
methods: {
setDefaultValue () {
if (this.defaultValue == '' && this.options.length > 0) {
return this.options[0];
}
return { name: this.defaultValue};
}
}
};
</script>
在我的父組件中，我使用了這個下拉串列，從 API 呼叫中獲取的值并填充了變化。所以我想要做的是如果沒有選擇該值（默認值：“選擇一個選項”），我想給出一條錯誤訊息，說下拉是強制性的。
<Dropdown
:options="getVariations"
@input="getSelected"
/>
<script>
import Dropdown from "../components/Dropdown";
import apiHelper from "../helpers/apiHelper";
export default {
components: {Dropdown},
data() {
return {
selected: "",
variationId: "",
selectedObject: null
};
},
computed: {
getVariations() {
return this.product.attributes.variations
}
},
methods: {
getSelected(opt) {
this.selectedObject = opt;
this.selected = opt.description;
this.variationId = opt.id;
}
},
};
</script>
uj5u.com熱心網友回復：
這是您要求的簡單示例：
// v-model property
selectedVModel: null
// html
<select id="testselect" v-model="selectedVModel" required>
<option :value="null">Default</option>
<option value="bar">Option 1</option>
<option value="foo">Option 2</option>
<option value="baz">Option 3</option>
</select>
<div v-if="!selectedVModel">Error! Choose something!</div>
您可以處理子組件內部的錯誤。在此示例中，如果v-modelasselectedVModel為空，則將顯示<div>with v-if="!selectedVModel"。因為selectedVModel是null它會自動選擇<option :value="null">Default</option>。如果您選擇了其中一個選項selectedVModelget′sa value，則v-if="!selectedVModel"結果為false，則沒有錯誤。如果Default再次選擇，該值將null再次變為trueat v-if="!selectedVModel"，因此該錯誤將再次可見。
將這個簡單的示例與您的代碼結合起來，讓我知道它是否對您有幫助。
uj5u.com熱心網友回復：
如果要在父組件中進行驗證，請嘗試檢查selectedObject.id：
Vue.component('Dropdown', {
template: `
<div :tabindex="tabindex" @blur="open = false">
<div : @click="open = !open">
{{ selected.name }}
</div>
<div :>
<div v-if="defaultValue != ''">{{defaultValue}}</div>
<div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);">
{{ option.name }}
</div>
</div>
</div>
`,
props: {
options: {
type: Array,
required: true,
},
defaultValue: {
type: String,
required: false,
default: "Choose an option",
},
tabindex: {
type: Number,
required: false,
default: 0,
},
},
data() {
return {
open: false,
selected: this.setDefaultValue(),
};
},
mounted() {
this.$emit("input", this.selected);
},
methods: {
setDefaultValue () {
if (this.defaultValue == '' && this.options.length > 0) {
return this.options[0];
}
return { name: this.defaultValue};
}
}
})
new Vue({
el: '#demo',
data() {
return {
selected: "",
variationId: "",
selectedObject: null,
product: {
attributes: {
variations: [{id: 1, name: 'name1', description: 'desc1'}, {id: 2, name: 'name2', description: 'desc2'},{id: 3, name: 'name3', description: 'desc3'},]
}
}
};
},
computed: {
getVariations() {
return this.product.attributes.variations
}
},
methods: {
getSelected(opt) {
this.selectedObject = opt;
this.selected = opt.description;
this.variationId = opt.id;
},
submit() {
if (!this.selectedObject.id) alert('pls select option')
else console.log(this.selectedObject)
}
},
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="submit">submit</button>
<Dropdown
:options="getVariations"
class="select"
@input="getSelected"
/>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/312665.html