鍍金池/ 問(wèn)答/HTML/ vuejs + element-ui, 后臺(tái)數(shù)據(jù)綁定select的option選

vuejs + element-ui, 后臺(tái)數(shù)據(jù)綁定select的option選項(xiàng)，select設(shè)置點(diǎn)擊事件無(wú)效

我想實(shí)現(xiàn)的功能是，我的option從后臺(tái)數(shù)據(jù)庫(kù)拿的數(shù)據(jù)，當(dāng)我點(diǎn)擊 el-select選項(xiàng)框時(shí)才開始調(diào)后臺(tái)數(shù)據(jù)接口，讓option顯示出來(lái)。但是我現(xiàn)在在el-select增加了 @click="getInvestInfo()" 點(diǎn)擊時(shí)間，卻并沒(méi)有效果，

<el-select v-model="form.investor" placeholder="請(qǐng)選擇投資人" @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里面是可以的 ，但不是我想要的效果 ，我只想在點(diǎn)選項(xiàng)的時(shí)候，才去調(diào)接口，而不是進(jìn)頁(yè)面的時(shí)候就調(diào)select的接口

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

問(wèn)題應(yīng)該是沒(méi)有進(jìn)去這個(gè)點(diǎn)擊的方法 console也打不出來(lái)

回答
編輯回答
背叛者

clipboard.png
不支持click 事件 你可以用change ，這也是為啥你在created 的時(shí)候函數(shù)調(diào)用了而點(diǎn)擊的時(shí)候卻沒(méi)反應(yīng)。

2017年8月2日 10:55
編輯回答
互擼娃

el-select中click事件無(wú)效，用focus方法

<el-select v-model="form.investor" placeholder="請(qǐng)選擇投資人" @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>
2017年7月19日 00:31
編輯回答
奧特蛋

不知道你是不是這樣的問(wèn)題, 有傳入的id 而沒(méi)有option或者option為空 select中就顯示id, 我是這樣做的. 先傳入id和name用這兩個(gè)來(lái)做一個(gè)假的option, 然后給最外面套一層div 點(diǎn)擊時(shí)獲取數(shù)據(jù)

2018年6月3日 12:46
編輯回答
伐木累

我寫了個(gè)demo，直接復(fù)制粘貼運(yùn)行便可看到效果，希望能對(duì)你有所幫助?。?/p> 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" >
</head>
<body>
    <div id="app">
        <el-select v-model="form.investor" placeholder="請(qǐng)選擇投資人" @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) { //只有沒(méi)有數(shù)據(jù)時(shí)才觸發(fā)，你可根據(jù)自己的需求來(lái)定
                        console.log(1);
                    }
                }
            }
        })
    </script>
</body>
</html>
2018年9月17日 20:11