vue 传参获取数据

首先是通过getOptions方法从数据库获取到所有的轮播类型

<el-form-item><el-select @change="getOptions" v-model="type" placeholder="请选择轮播类型" style=""><el-option v-for="(item,index) in objData" :key="index" :value="item.type":label="item.type"/></el-select>
<el-form-item>

getOptions方法

//获取下拉框中内容getOptions(){let _this = thisthis.$http.get("/company/imgtype/queryAll").then(res =>{//请求返回的数据//赋值_this.objData = res.dataconsole.log(this.objData)}).catch((error) =>{console.log(error);});},

从数据库中获取到所有的类型，放到objdata中

data () {return {mixinViewModuleOptions: {getDataListURL: '/company/slideshow/page',getDataListIsPage: true,exportURL: '/company/slideshow/export',deleteURL: '/company/slideshow',deleteIsBatch: true},dataForm: {id: ''},type:'',objData:[],dataList:[]}

将获取到的type传入gettype函数中查询

<el-form-item><el-button @click="gettype(type)">类别查询</el-button></el-form-item>

对应method方法

 gettype(e){console.log(this.dataList);this.$http.get('/company/slideshow/type',{params:{type:e}}).then((res) => {console.log(res)this.dataList= res.data}).catch((error) =>{console.log(error);});},

get将参数以问号拼在路径后面将获取的数据填充到dataList中
getOptions要在mounted钩子函数中调用一次

 mounted() {this.getOptions()},

注意 objdata变量名和方法中要一直如果粗心导致data中定义的变量名写错比如写成objdate会导致第一次页面展示的时候数据显示不出来仔细对照下

vue 传参获取数据相关推荐

apiCloud中api.ajax方法跨域传参获取数据
apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中获取参数 var pageP ...
React学习：路由定义及传参、数据复用-学习笔记
文章目录 React学习:路由定义及传参.数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参 React学习:路由定义及传参.数据复用-学习笔记在R ...
Vue项目中获取数据后使用swiper轮播，无法轮播且 autoplay 和 loop 失效问题！
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片
vue如何动态获取数据改变背景颜色和字体颜色以及获取图片首先要想获取多条数据要用到v-for循环,写到循环就必须写:key 话不多说上代码重点就是:style="{background: ...
FormPanel,EditorGridPanel的赋值和传参、数据的保存删除
FormPanel,EditorGridPanel的赋值和传参.数据的保存删除首先,需要注意几个问题: 1.我们最常用的Store都是用于Grid取值,用columnModel中的dataIndex ...
url传参获取参数方法
url传参获取参数方法 //调用const infos = this.getQuery(); //该方法返回一个对象 key 为所传参数名 value 参数值getQuery(key) {var s ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
vue 传参微信_vue-router 你可能忽略的知识点
vue-router相信大家都不陌生,并且很多都有实战经验.可能有很多你忽略的一些点. 1.丑陋的hash值 vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完 ...

vue 传参获取数据

vue 传参获取数据相关推荐

最新文章

热门文章