解决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调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
微信小程序 搜索框组件代码实例
Sep 06 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 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生成带有雪花背景的验证码
2008/09/28 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Laravel find in set排序实例
2019/10/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python决策树和随机森林算法实例详解
2018/01/30 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python利用platform模块获取系统信息
2020/10/09 Python
软件测试常见笔试题
2012/02/04 面试题
放飞梦想演讲稿200字
2014/08/26 职场文书
生活小常识广播稿
2014/09/16 职场文书
实习科室评语
2015/01/04 职场文书
农村党支部承诺书
2015/04/30 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL