динамического события компонента нажмите на Vue

Question

оказывает компоненты Vue с помощью v-for:

<component 
    v-for="component in components" 
    :is="component.type" 
    @click="myFunction(component.id)"> 
</component> 

При нажатии на оказанном компоненте не срабатывает метод myFunction. Однако щелчок по вставленному вручную компоненту делает:

<div @click="myFunction('...')"></div> 

Как исправить это?

Answer 1

Попробуйте следующее:

<template v-for="component in components"> 
    <component :is="component.type" @click="myFunction(component.id)" /> 
</template > 

Answer 2

Вы можете передать обработчик щелчка в качестве опоры к компоненту ребенка, например:

<component 
    v-for="component in components" 
    :is="component.type" 
    :on-click="myFunction.bind(this, component.id)"> 
</component> 

// Component 
<template> 
    <button @click="onClick">Click me</button> 
</template> 
<script> 
    export default { 
    props: ['onClick'] 
    } 
</script> 

Answer 3

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

<div class="wrapper" v-for="component in components" @click="myFunction(component.id)"> 
    <component :is="component.type"/> 
</div> 

Это должно сделать это.

Answer 4

Добавить .native модификатор, чтобы прослушивать собственное событие вместо события компонента.

<component 
    v-for="component in components" 
    :is="component.type" 
    @click.native="myFunction(component.id)"> 
</component> 

Источник: https://vuejs.org/v2/api/#v-on