解决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 相关文章推荐
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
javascript类型转换示例
2014/04/29 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
javascript history对象详解
2017/02/09 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python守护进程实现过程详解
2020/02/10 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
园林资料员岗位职责
2013/12/30 职场文书
户外拓展活动方案
2014/02/11 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
红色故事汇观后感
2015/06/18 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技