解决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>

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

赞 (0)

相关推荐

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • 解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题

    1.创建vue项目 2.使用vant组件 npm install vant --S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重新下载一个最新的vant就可以了,现在是2.6.0版本 好,接下来继续 在需要使用下拉

  • 解决vue addRoutes不生效问题

    动态添加导航栏时,addRoutes不生效解觉 1.在addroutes前,使用router.options.routes=XXXXX的方法手动添加 2.使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏 补充知识:vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决 起因 在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-rout

  • vue实现下拉加载其实没那么复杂

    vue实现下拉加载其实没那么复杂

    前言 之前缺乏移动端的经验.一直不知道上拉加载,下拉刷新是怎么实现的.现在正好有个产品有这样一个需求.想了一会没有思路.就去找插件.啥vue-infinite-scroll,vue-virtual-scroll-list.啊呀,牛!无限滚动,十万条数据渲染. 经过我一大圈的折腾.还是默默的卸载了插件.我只是需要实现一个下拉加载,不需要其他这么多的功能.看了看其他人的源码,直接撸了起来,实现一个List组件. 效果展示 MList.vue <template> <div class=&qu

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

    问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料 发现 Vue的this理解有误 jsp 下拉菜单 <select name="plantModelParentId" v-model="vueObj.plantModelParentId" @change="selectChange"> <option value=""></option> <option v-fo

  • Vue.js下拉菜单组件使用方法详解

    Vue.js下拉菜单组件使用方法详解

    本文实例为大家分享了Vue.js下拉菜单组件的具体实现代码,供大家参考,具体内容如下 效果 #### 入口页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

  • vue实现下拉菜单树

    本文实例为大家分享了vue实现下拉菜单树的具体代码,供大家参考,具体内容如下 效果:使用 Vue-Treeselect 实现 建议通过npm安装vue-treeselect,并使用webpack之类的捆绑器来构建您的应用程序. npm install --save @riophae/vue-treeselect 官网实例 配置属性请查看官网 <!-- Vue SFC --> <template> <div id="app"> <treesele

  • Google Suggest ;-) 基于js的动态下拉菜单

    Google Suggest ;-) 基于js的动态下拉菜单

    基本的原理是在当前窗口创建了一个iframe,然后将相关关键词的提示列表在iframe中,并通过列表点选将选定项放到搜索框中.能这么快的能将所有相关关键词的检索数列出,看来所有的提示词已经提前进行了预搜索和数量记录.试了一下"sex",没有相关检索提示,看来对搜索词进行了严格的色情过滤. 另外:这一动态列表功能也应用在GMail的地址栏自动输入完成中,如图: Google自动完成的源代码如下:// Copyright 2004 and onwards Google Inc. var w

  • vue+element实现下拉菜单并带本地搜索功能示例详解

    vue+element实现下拉菜单并带本地搜索功能示例详解

    需求: 后台返回数组对像,前端组合成数组,根据name组合成一个个数组并把后台返回的值当成一个children推入数组,在数组中自定义属性备份数据防止搜索的时候改变原数组使得数组无法回退 这里是用的vuex存储,因为多个页面使用同一个接口;所以没必要重复请请求 src\store\module\metadata.js /* * @Author: your name * @Date: 2021-09-02 15:46:45 * @LastEditTime: 2021-09-16 17:39:53

  • Javascript级联下拉菜单以及AJAX数据验证核心代码

    虽然也使用了Prototype.js来编写,但是由于对它的不了解,类的实现仍然是使用了<JavaScript高级程序设计>里的方法.使用AJAX进行数据验证时,最初使用的是XML来当数据源,然而在使用了一段时间后,发现XML效率太低,于是又使用JSON来做为数据源. 一年过去了,客户又提出了新的需求,最初是只要输入框的两个数据相符就行,现在的要求是两个下拉菜单的数据也要相符,于是,我利用此机会,将代码重构了一次. 需求: 1.根据下拉菜单产品名称.产品包装的选择,右面的图片要进行相应的变化.

  • jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

    上面的人要hui admin  做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了 发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接 比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC

  • Vue实现自定义下拉菜单功能

    先看例子,后面有对用到的知识点的总结 效果图: 实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件练习</title> <link rel="stylesheet" type="text/css" href="component.c

  • vue实现带过渡效果的下拉菜单功能

    vue实现带过渡效果的下拉菜单功能

    本文实例为大家分享了vue中仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下 效果图 clickOutside.js 点击目标之外的地方,下拉框隐藏 代码如下: export const clickOutside = { bind(el, binding, vnode) { function documentHandler(e) { if (el.contains(e.target)) { return false; } if (binding.expression) { bi

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

随机推荐