我正在使用bootstrap vue來設計我的應用程式。在該應用程式中，我正在使用b-modal。b-modal中的一些欄位是必須的，所以我想在用戶沒有提供資訊的情況下突出顯示它們。在普通的bootstrap中，我在其他應用程式中使用過，它突出顯示欄位并顯示一個默認資訊field is required，但在bootstrap-vue中，我沒有得到任何默認的資訊。誰能告訴我需要做什么呢？
以下是我的bootstrap vue modal代碼：
<template>
<b-modal。
id="formSubmission"
size="lg"/span>
title="基本細節"
:visible="visibility"。
style="width: 100%"/span>
@cancel="hideModal"/span>
@ok="submitModal($event)"
>
< b-form-select v-model="type"/span> class="form-control" required>
<b-form-select-option value="type1">/span>
型別1
</b-form-select-option>型別1
<b-form-select-option value="type2"/span>>
型別2
</b-form-select-option>型別2
</b-form-select>/span>
<div v-if="type == 'type1'"/span>>
<input。
type="text"/span>
class="form-control"
style="width:200px"/span>
自動完成="off"/span>
placeholder="Enter Name"
:required="type == 'type1'"
>
</div>/span>
</b-modal>/span>
</template>/span>
<script>
export default {
資料（） {
return {
visibility: true visibility: true
}
},
methods: {
hideModal () {
this.visibility = false }.
},
submitModal (event) {
event.preventDefault()
}
}
</script>
<style>>
</style>/span>
我想做的是在提交程序中突出顯示需要的欄位？我想知道是否有一個開箱即用的方法，而不是為每一個欄位撰寫函式。
像這樣：
uj5u.com熱心網友回復：
模態不知道你在它里面有輸入元素，也不知道你想驗證它。這就是為什么什么都沒有發生。
你可以用幾種方法解決這個問題。我推薦的方法是首先用<b-form>在你的輸入域周圍創建一個表單。
然后當點擊OK按鈕時，我們需要提交表單，因為這時將驗證輸入并在要求被填滿時顯示一個錯誤。
然后我們將使用modal-footer槽，來覆寫默認的頁腳，并用我們自己的按鈕來取代它。對于取消按鈕，我們將使用槽范圍內的cancel方法，這樣它就會像默認的那樣運作。
然而，對于OK按鈕，我們將使用form屬性和type="submit"，來為modal中的表單創建一個提交按鈕。 form屬性從我們的表單中獲取id。
如果表單被成功提交，我們需要手動隱藏模態。在這個片段中，我們使用this.$bvModal.hide來實作。
new Vue（{
el: '#app',
data（） {
return {
value: ''。
}
},
methods: {
onSubmit（） {
const {
價值
} = this;
alert(`Submitted: ${value}`) 。
this.$bvModal.hide('my-modal' /span>)
}
})< link type="text/css"/span> rel="styleheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
< link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="styleheet" />
<script src="//unpkg.com/[email protected]/dist/vue.min.js"> </script>>
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue.min.js"/span>> </script>>
< div id="app" class="p-4">/span>
<b-btn v-b-modal.my-modal> 顯示模式</b-btn>
< b-modal id="my-modal" title="Form Modal" visible>
<b-form id="my-form"/span> @submit. prevent="onSubmit">。
< b-input v-model="value"/span> required minlength="3" autofocus placeholder="write something. 。"></b-input>
</b-form>/span>
<template #modal-footer="{ cancel }"/span>>
<b-btn @click="取消"> 取消</b-btn>
< b-btn variant="primary" 型別="提交" 表單="my-form"> OK</b-btn>。
</template>/span>
</b-modal>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/309219.html
標籤：