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

我想实现的功能是，我的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也打不出来

element-ui

阅读 23.4k

5 个回答

得票最新

AaronYuan

1.5k133447

发布于
2018-01-25

✓ 已被采纳

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>

答非

7258

发布于
2018-01-24

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

luozz

5.8k3629

发布于
2018-01-24

更新于
2018-01-24

我写了个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>