您好,匿名用户

elementui下拉框调取接口后设置默认值,change时报错

0 投票

1.项目需求简化下是这样,需要先调用接口获取下拉框的值并且设置第一项为其默认值,然后调用另外个接口需要带上这个参数
2.下拉框代码

<template slot="productTypeSelect">
            <el-select class="product-type-select" v-model="typeId" placeholder="请选择产品类型">
                <el-option
                        v-for="item in productTypeList"
                        :key="item.id"
                        :label="item.typeName"
                        :value="item.id">
                </el-option>
            </el-select>
        </template>
        
    

其中productTypeList是调接口获取到的,typeId是需要取的值以便另外个接口使用

      data(){
          return {
              productTypeList: [],
              typeId: ''
          }
      },
      methods : {
          async fetchList() {
            let list = await getProductTypeList({
                location : this.lang,
                delFlag : 0,
                page : 0,
                rows : 2000
            })
            this.productTypeList = list.data.result
           let data = {
                    location: this.lang,
                    delFlag: 0,
                    page: this.currentPage,
                    rows: this.pageSize,
                    typeId: this.typeId
                }
                getProductList(data).then(res => {
                    this.tableData = res.data.result
                    this.totalPages = res.data.recordsTotal
                })

        },
      },
       computed : {
        typeId : {
            get() {
                return this.productTypeList.length > 0 ? this.productTypeList[0]['id'] : ''
            },
            set(v) {
               
            }
        }
    }

因为考虑到typeId是需要取productTypeList的某个值,而且下拉框change改变也会赋值,所以第一反应就是计算属性,get方法倒是设置了,但是set不知道如何设置,直接设置this.typeId=v会内存栈max,所以又考虑通过watch productTypeList来设置默认值,那么change就不会有问题了

watch : {
        productTypeList(n,o) {
            if(n.length>0)this.typeId=n[0]['id']
        }
    }

但是问题来了,我fetchList函数里面await后虽然接着就给productTypeList赋值,然后watch肯定就生效了,typeId肯定就有值了,但是并不是这样,接下来的getProductList请求参数中typeId依然为空,我觉得这里是watch后于

 let data = {
                    location: this.lang,
                    delFlag: 0,
                    page: this.currentPage,
                    rows: this.pageSize,
                    typeId: this.typeId
                }

这一步,所以我加了个setTimeout,

async fetchList() {
            let list = await getProductTypeList({
                location : this.lang,
                delFlag : 0,
                page : 0,
                rows : 2000
            })
            this.productTypeList = list.data.result
            setTimeout(()=>{
                let data = {
                    location: this.lang,
                    delFlag: 0,
                    page: this.currentPage,
                    rows: this.pageSize,
                    typeId: this.typeId
                }
                getProductList(data).then(res => {
                    this.tableData = res.data.result
                    this.totalPages = res.data.recordsTotal
                })
            },0)

        },

此时typeId有值了,但是这种办法我觉得不太好,计算属性肯定是比较好的方案,所以想请问下计算属性该如何设置,其他更好的解决方案如果有也希望能帮帮忙,谢谢各位

用户头像 提问 5月29日 @ Graves 中士 (1,264 威望)
分享到:

1个回答

0 投票
 
最佳答案
data(){
      return {
          productTypeList: [],
          typeId: ''
      }
  },
  methods : {
      fetchList() { //获取select数据源
        let form = {
            location : this.lang,
            delFlag : 0,
            page : 0,
            rows : 2000
        };
        getProductTypeList(form).then(res => {
          this.productTypeList = res.data.result  
        })
    },
    searchMessage () { //查询
         let data = {
            location: this.lang,
            delFlag: 0,
            page: this.currentPage,
            rows: this.pageSize,
            typeId: this.typeId
        }
        getProductList(data).then(res => {
            this.tableData = res.data.result
            this.totalPages = res.data.recordsTotal
        })
    }
  },
   computed : {},
watch : {
    productTypeList:{
        handler(n,o){
            if(n.length>0){
                this.typeId=n[0]['id']
            }
        },
        deep: true
    },
    typeId (newVal,oldVal){
        if(newVal != oldVal){
            this.searchMessage();
        }
    }
},
mounted() {
    this.fetchList();
}

我是比较喜欢这样处理。

用户头像 回复 5月29日 @ Shyvana 中士 (1,159 威望)
选中 5月16日 @Graves
提一个问题:

相关问题

0 投票
1 回复 33 阅读
0 投票
0 回复 50 阅读
用户头像 提问 5月24日 @ Gemini 中士 (1,329 威望)
0 投票
1 回复 32 阅读
0 投票
1 回复 29 阅读

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

IT技术交流群 - 随意问
欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...