解决vue动态下拉菜单有数据未反应的问题

更新时间：2020年08月06日 11:43:02 作者：ArchitectDream

这篇文章主要介绍了解决vue动态下拉菜单有数据未反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

问题出现在当时后台数据会返回到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>

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动态下拉菜单有数据未反应的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中组件通信的八种方式（值得收藏！）
这篇文章主要给大家总结介绍了关于vue中八种组件通信方式的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
vue+Element ui实现照片墙效果
这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue项目base64字符串转图片的实现代码
这篇文章主要介绍了vue项目base64字符串转图片的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07
vue在使用element组件出现<el-input>标签无法输入的问题
这篇文章主要介绍了vue在使用element组件出现<el-input>标签无法输入的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue3组件间的通信方式详解
这篇文章主要介绍了Vue3组件间的通信方式，在使用vue时，我们经常会把不同的模块拆分成不同的组件，而组件之间有的需要传递数据，所以组件间的数据通信就非常重要了
2023-04-04
使用mint-ui实现省市区三级联动效果的示例代码
下面小编就为大家分享一篇使用mint-ui实现省市区三级联动效果的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
用vue设计一个日历表
这篇文章主要介绍了如何用vue设计一个日历表，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
2020-12-12
Vue中KeepAlive内置缓存使用详解
KeepAlive 是 vue 中的内置组件，当多个组件动态切换时可以对实例状态进行缓存，本文就来详细的介绍一下Vue中KeepAlive内置缓存使用，感兴趣的可以了解一下
2023-10-10
在vue2中实现截图功能的基本步骤
在Vue 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下
2023-10-10
vue深拷贝的3种实现方式小结
当使用同一个对象产生冲突时，可以使用lodash包，对该对象进行深拷贝，从而使操作的对象为不同的对象,这篇文章主要给大家介绍了关于vue深拷贝的3种实现方式,需要的朋友可以参考下
2023-02-02