Как исправить мою простую пользовательскую директиву v-on, которая не выполняет метод сразу?

Question

Я здесь, чтобы спросить некоторую помощь о том, почему моя пользовательская директива не работает должным образом. Я пытаюсь создать свою собственную директиву v-on (названную v-myOn), которая будет просто изменять цвет фона текста при нажатии. Проблема заключается в том, что метод выполняется мгновенно, когда запускается приложение vue js (имеется в виду, что фон элемента уже имеет цветовой стиль), а не когда происходит определенное событие, когда происходит щелчок по элементу. Заранее спасибо!

Обновление: проблема в том, что, как сказал Фил, я выполняю функцию непосредственно в шаблоне. Но в этом случае я пытаюсь передать аргумент методу changeColor. Так, как я мог препятствовать тому, чтобы это выполнялось, будучи в состоянии передать аргументы?

Вот мой код в App.vue:

<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1 v-myOn:click="changeColor('blue')" :style="{background:  color}" ref="heading">Directives Exercise</h1>
                <!-- Exercise -->
                <!-- Build a Custom Directive which works like v-on (Listen for Events) -->

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                color: ''
            }
        },


        directives: {

            myOn : {
                bind(el, binding, vnode) {
                    el.addEventListener(binding.arg, binding.value)
                }
            }
        },
        methods: {
            changeColor(color)
            {
                this.color = color;
            }
        }

    }
</script>

<style>
</style>

Answer 1

Вы должны обернуть в arrow function, в противном случае оно будет выполнено немедленно, как вы обнаружили, и @Phil указал.

<h1 v-myOn:click="() => changeColor('blue')" :style="{background:  color}" ref="heading">Directives Exercise</h1>