vue 传参获取数据

最新推荐文章于 2022-08-03 15:35:17 发布

原创最新推荐文章于 2022-08-03 15:35:17 发布 · 988 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何在Vue.js应用中通过getOptions方法从数据库获取轮播类型数据。首先调用getOptions来获取所有类型并存储在objdata中，然后将type参数传入gettype函数进行查询。在对应的method中，使用get方法将参数拼接在URL后面，并将获取的数据填充到dataList。getOptions需在组件的mounted生命周期钩子中调用，确保初次渲染时数据正确显示。注意，变量名和方法的匹配至关重要，否则可能导致初次加载时数据未显示。

首先是通过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 = this
      this.$http.get("/company/imgtype/queryAll")
              .then(res =>
              {
                //请求返回的数据
                //赋值
                _this.objData = res.data
                console.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 传参获取数据

1 条评论