vue.js で element ui rate が何度も動いてしまう


elment ui の el-rate を使って

・ユーザーのID
・スコア

を取得して axios したい。
しかし、1度クリックしたら何度も動いてしまう。

結論
@change.once を使おう!


<template>

    <div>
            <div v-for="(v,key) in list">
                イケメン度 {{list[key].ikemen}}
                <el-rate v-model="list[key].ikemen" @change.once="ikemenRate(key)"></el-rate>
            </div>
    </div>

</template>

<script>



    export default {

        data () {
            return {
                list:[]
            };
        },

        methods: {

            ikemenRate(key){

                let dataform = new FormData();
                dataform.append('id',this.list[key].id);
                dataform.append('ikemen',this.list[key].ikemen);

                axios.post('/user/ikemenRate', dataform).then(e => {
                    console.log(e.data.res);
                    console.log(" イケメンレート 成功");
                }).catch((error) => {
                    console.log(" イケメンレート エラー");
                });
            },
        },


    }
</script>