溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue項目中使用vant下拉框title值不變怎么解決？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1、創建vue項目
2、使用vant組件
npm install vant --S
全局引用時在main.js引入
import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
假如你引入之后發現頁面的樣式和組件都掛載了，但是console控制臺會報錯，說xxxx組件沒有register,這個時候很有可能是你的vant插件版本有問題，重新下載一個最新的vant就可以了，現在是2.6.0版本
好，接下來繼續
在需要使用下拉框的地方使用下拉框組件
<van-dropdown-menu>
<van-dropdown-item
v-model="value"
:options="developList"
/>
</van-dropdown-menu>
data () {
return {
value: ''
developList: [
{
value: '1',
text: '我是第一個'
},
{
value: '2',
text: '我是第二個'
},
]
}
}假如是這樣的話那么下拉框就會默認顯示第一個字眼“wishing第一個”，然后你在點擊下拉框選擇第二個時也會改變成“我是第二個”
如果你不想有默認選中，并且一開始就顯示請選擇這樣的提示字眼，那么我們可以去看看vant的api文檔，發現有一個title的字眼，這個title就是下拉框的顯示文字，一開始很多人以為這個下拉框的title只是用來顯示然后點擊下拉框的item之后會自動綁定過的，但其實是錯誤的，以下就是一個很好的例子
<van-dropdown-menu>
<van-dropdown-item
title="請選擇"
v-model="value"
:disabled="disabled"
:options="developList"
/>
</van-dropdown-menu>
data () {
return {
value: ''
developList: [
{
value: '1',
text: '我是第一個'
},
{
value: '2',
text: '我是第二個'
},
]
}
}你會發現請選擇的自然從來沒變過，無論你選擇了第一個還是第二個，那么你就會想title是不是綁定，接下來就有以下操作
<van-dropdown-menu>
<van-dropdown-item
:title="title"
v-model="value"
:disabled="disabled"
:options="developList"
/>
</van-dropdown-menu>
data () {
return {
value: ''
title:''請選擇,
developList: [
{
value: '1',
text: '我是第一個'
},
{
value: '2',
text: '我是第二個'
},
]
}
}加下來發現還是沒有改動啊，那是不是綁定的值沒有發生改變了，好像是的，因為你值定義了這個title,這個title就是下拉框選擇的顯示，只是你沒有title的時候vant把你選擇的text文字映射到title上去了，一旦你自己使用title進行綁定，那么每次修改時就要修改title，查看vant api可以發現有change事件，接下來就可以操作了
<van-dropdown-menu>
<van-dropdown-item
:title="title"
v-model="value"
:options="developList"
@change="changeDevelop"
/>
</van-dropdown-menu>
data () {
return {
value: ''
title:''請選擇,
developList: [
{
value: '1',
text: '我是第一個'
},
{
value: '2',
text: '我是第二個'
},
]
}
},
methods: {
changeDevelop (i) {
this.title = this.developList[i-1].text
},
}看完上述內容，你們掌握vue項目中使用vant下拉框title值不變怎么解決的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
