解决vue动态下拉菜单 有数据未反应的问题


Posted in Javascript onAugust 06, 2020

问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误

jsp 下拉菜单

<select name="plantModelParentId" v-model="vueObj.plantModelParentId" @change="selectChange">
 <option value=""></option>
 <option v-for="(item,index) in selectlist" :value="index"> {{item.plantModelName}}</option>
</select>

JS

new Vue({
 el : "#vueadd",
 data : {
 vueObj : {},
 selectlist : []
 },
 created : function() {
 // 判断搜索是否为父级为空
 var a = 0;
  //var self=this.selectlist出错 原因是并未找到selectlist 经过查询资料this指向的事new Vue
 var self=this; 
 $.ajax({
  type : "post",
  url : basePath + "/cultmanage/seachCult.do",
  dataType : 'json',
  data : {
  plantModelParentId : a,
  },
  success : function(data) {
  //会返回后台的值 但是没出现下拉框 
  //console.log(JSON.stringify(data));
  self.selectlist = data;
  },
  error : function(data, type, err) {
  alert("错误类型:" + type + "; 错误信息:" + err);
  }
 });
 }

补充知识:vue+elementUI导航中,点击body子菜单收缩的问题

项目中用到了vue+elementUI,发现点击body导航子菜单会收缩的问题

原因:是elementUI版本的问题,发现我使用的是2.4.11版本,卸载重新安装2.4.9版本就可以了

安装命令:

cnpm uninstall element-ui//卸载

cnpm install element-ui@2.4.9 --save

以上这篇解决vue动态下拉菜单 有数据未反应的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 #Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 #Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 #Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 #Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 #Javascript
Vue Router中应用中间件的方法
Aug 06 #Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
wxpython学习笔记(推荐查看)
2014/06/09 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Python模块的制作方法实例分析
2019/12/21 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
精神文明建设标语
2014/06/16 职场文书
视光学专业自荐信
2014/06/24 职场文书
超市创意活动方案
2014/08/15 职场文书
调研汇报材料范文
2014/08/17 职场文书
先进教师个人总结
2015/02/11 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android