解决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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
js实现下拉菜单效果
Mar 01 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
angular.bind使用心得
2015/10/26 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python把一个字符串切开的实例方法
2020/09/27 Python
C语言面试题
2015/10/30 面试题
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
毕业生自荐信格式
2014/03/07 职场文书
端午节活动策划方案
2014/03/09 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
社区活动总结范文
2015/05/07 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
送给客户微信问候语!
2019/07/04 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript