解决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 获取input点选按钮的值的方法
Apr 14 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
this.$toast() 了解一下?
Apr 18 Javascript
vue实现自定义多选按钮
Jul 16 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python实现同一局域网下传输图片
2020/03/20 Python
如何表示python中的相对路径
2020/07/08 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
全球虚拟主机商:HostGator
2017/02/06 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
关于感恩的演讲稿400字
2014/08/26 职场文书
2015年工会工作总结
2015/03/30 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
python数字类型和占位符详情
2022/03/13 Python