解决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 获取和设置Select选项的代码
Feb 07 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jquery offset函数应用实例
Nov 14 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
js的三种继承方式详解
Jan 21 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
小程序实现录音功能
Sep 22 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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
webpack搭建vue 项目的步骤
2017/12/27 Javascript
React如何避免重渲染
2018/04/10 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
Python执行时间的计算方法小结
2017/03/17 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
《孔子拜师》教学反思
2014/02/24 职场文书
绿化工程实施方案
2014/03/17 职场文书
抽样调查项目计划书
2014/04/24 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
公司感谢信范文
2015/01/22 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
JavaScript组合继承详解
2021/11/07 Javascript