解决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 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js比较日期大小的方法
2015/05/12 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python中的全局变量如何理解
2020/06/04 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
银行实习生的自我评价
2013/12/09 职场文书
党支部公开承诺书
2014/03/28 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
评先进个人材料
2014/12/29 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫