解決vue使用vant下拉框van-dropdown-item 繫結title值不變問題
阿新 • • 發佈:2020-08-06
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',] } }
你會發現請選擇的自然從來沒變過,無論你選擇了第一個還是第二個,那麼你就會想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',] } }
加下來發現還是沒有改動啊,那是不是繫結的值沒有發生改變了,好像是的,因為你值定義了這個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:''請選擇,] } },methods: { changeDevelop (i) { this.title = this.developList[i-1].text },}
這就沒問題啦!
以上這篇解決vue使用vant下拉框van-dropdown-item 繫結title值不變問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。