vuejs + element-ui, 后台数据绑定select的option选项,select设置点击事件无效

AaronYuan
  • 1.5k

我想实现的功能是,我的option从后台数据库拿的数据,当我点击 el-select选项框时才开始调后台数据接口,让option显示出来。但是我现在在el-select增加了 @click="getInvestInfo()" 点击时间,却并没有效果,

<el-select v-model="form.investor" placeholder="请选择投资人" @click="getInvestInfo()">
    <el-option v-for="item in getInvestorsInfo"
               :key="item.invest_username"
               :label="item.invest_username"
               :value="item.investuser_id">
    </el-option>
</el-select>
  methods: {
    getInvestInfo(){
        let uid = sessionStorage.getItem('uid');
        var params = new URLSearchParams();
        params.append('is_iso', '1');
        params.append('uid', uid);
        this.$axios({
            method: 'post',
            url:httpUrl.InvestUserList,
            data:params,
        }).then((res)=>{
            console.log(res.data);
            if(res.data.errCode==0){
                this.getInvestorsInfo = res.data.retData;
            }else if(res.data.errCode==1){
                this.$message.error(res.data.retData.msg);
            }else if(res.data.errCode==2){
                this.$router.push('/login');
            }
        });
    }
}

getInvestInfo方法放在created里面是可以的 ,但不是我想要的效果 ,我只想在点选项的时候,才去调接口,而不是进页面的时候就调select的接口

       created(){
//            this.getInvestInfo();      
        },

问题应该是没有进去这个点击的方法 console也打不出来

回复
阅读 18.8k
5 个回答
✓ 已被采纳

el-select中click事件无效,用focus方法

<el-select v-model="form.investor" placeholder="请选择投资人" @focus="getInvestInfo()">
    <el-option v-for="item in getInvestorsInfo"
               :key="item.invest_username"
               :label="item.invest_username"
               :value="item.investuser_id">
    </el-option>
</el-select>

clipboard.png
不支持click 事件 你可以用change ,这也是为啥你在created 的时候函数调用了而点击的时候却没反应。

我写了个demo,直接复制粘贴运行便可看到效果,希望能对你有所帮助!:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-select v-model="form.investor" placeholder="请选择投资人" @focus="getInvestInfo()">
            <el-option v-for="item in getInvestorsInfo" :key="item.invest_username" :label="item.invest_username" :value="item.investuser_id">
            </el-option>
        </el-select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                getInvestorsInfo: [],
                form: {
                    inerstor: ''
                }

            },
            methods: {
                getInvestInfo() {
                    if (!this.getInvestorsInfo.length) { //只有没有数据时才触发,你可根据自己的需求来定
                        console.log(1);
                    }
                }
            }
        })
    </script>
</body>
</html>

不知道你是不是这样的问题, 有传入的id 而没有option或者option为空 select中就显示id, 我是这样做的. 先传入id和name用这两个来做一个假的option, 然后给最外面套一层div 点击时获取数据

是星星呀
  • 3
新手上路,请多包涵

@click.native ="getInvestInfo()"

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏