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


Posted in Javascript onAugust 05, 2020

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值不变问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 #Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 #Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 #Javascript
vue 限制input只能输入正数的操作
Aug 05 #Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
You might like
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
JS定时器实例
2013/04/17 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python操作SQLite简明教程
2014/07/10 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Django 路由控制的实现
2019/07/17 Python
python的常见矩阵运算(小结)
2019/08/07 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
物流仓储计划书
2014/01/10 职场文书
法制教育演讲稿
2014/09/10 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
会议主持人开场白台词
2015/05/28 职场文书
新郎婚礼致辞
2015/07/27 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
小学安全教育主题班会
2015/08/12 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
SQL语句多表联合查询的方法示例
2022/04/18 MySQL