金狮镖局

解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
网络编程 2024/11/18 佚名
2 0
金狮镖局 Design By www.egabc.com

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下拉框van-dropdown-item 绑定title值不变问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

标签：
vue,vant下拉框,van-dropdown-item,绑定title值
金狮镖局 Design By www.egabc.com
金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
金狮镖局 Design By www.egabc.com

评论“解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题”

暂无解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题的评论...
www.egabc.com 金狮镖局
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
金狮镖局 Design By www.egabc.com