解决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 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
javascript连续赋值问题
Jul 08 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 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代码优化及php相关问题总结
2006/10/09 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
javascript 数组排序函数
2009/08/20 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
10款最好的Python开发编辑器
2019/07/03 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
单位在职证明范本
2014/01/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
工作会议通知
2015/04/15 职场文书
寒假生活随笔
2015/08/15 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android
如何Python使用re模块实现okenizer
2022/04/30 Python