VUE - Eventlistener в директиве не может прочитать функцию, определенную в методах - PullRequest
Новая
       91

VUE - Eventlistener в директиве не может прочитать функцию, определенную в методах

0 голосов
/ 30 апреля 2020

Я хочу, чтобы моя функция, определенная в 'методах', выполнялась при нажатии на мой элемент. Тем не менее, мой Eventlistener делает что-то только тогда, когда я использую анонимную функцию, такую ​​как 

el.addEventListener('click' function() {console.log('hi'))

Когда я устанавливаю функцию в методах, она выдает сообщения об ошибках, говорящие

vue. js? 3de6: 634 [Vue warn]: ошибка в директиве myDirective bind hook: «ReferenceError: sizechange не определен»

найдено в

---> в / Users / soonkpaik / Загрузки / Старт 2 / src / 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-myDirective:sizechange='{ inisize:100, finsize:500, color:"pink", blinkcolor:"red" }'>Directives Exercise!</h1>
                <!-- Exercise -->
                <!-- Build a Custom Directive which works like v-on (Listen for Events) -->

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

<script>
    export default {
     directives:{  myDirective:{
                bind(el,binding,vnode){




                    let maincolor=binding.value.color;
                    let newcolor=binding.value.blinkcolor;        
                    let currentcolor=maincolor;

                    setInterval( ()=>{
                         currentcolor==newcolor? currentcolor=maincolor : currentcolor=newcolor

                         el.style.backgroundColor=currentcolor 
                    },500)

                     el.addEventListener('click',sizechange)






            }

        }
    },
       methods:{

        sizechange() {
            console.log('hi')

        }
    },
    }
</script>

<style>
</style>

Что я сделал не так ?? Заранее спасибо.

1 Ответ

1 голос
/ 30 апреля 2020

Проблема здесь в том, что sizechange() функция недоступна непосредственно внутри bind hook function напрямую. Вам нужно будет сослаться на текущий контекст vnode , например: 

export default {
  directives: {
    myDirective: {
      bind(el, binding, vnode) {

        // Your logic here...

        var vm = vnode.context;
        el.addEventListener('click', vm.sizechange) // This works fine now
      }    
    }
  },
  methods: {
    sizechange() {
      console.log('hi')    
    }
  },
}
...