Vue v-on: el clic no funciona en el componente

Estoy tratando de usar la directiva on click dentro de un componente pero no parece funcionar. Cuando hago clic en el componente nothings sucede cuando debería obtener un 'test clicked' en la consola. No veo ningún error en la consola, así que no se que estoy haciendo mal.

Índice.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue 

<template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>

Prueba.vue (el componente) 

<template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
Author: Saurabh, 2017-01-05
Source

4 answers

Si desea escuchar un evento nativo en el elemento raíz de un componente, debe usar .modificador nativo {[5] } para v-on, como sigue: 

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

O en forma abreviada, como se sugiere en el comentario, también puede hacer: 

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>
 127
Author: Saurabh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-17 04:00:07

Creo que la función $emit funciona mejor para lo que creo que estás pidiendo. Mantiene su componente separado de la instancia de Vue para que sea reutilizable en muchos contextos.

<template>
  <div id="app">
    <test @click="$emit('test-click')></test>
  </div>
</template>

Utilícelo en HTML

<test @test-click="testFunction">
 4
Author: Jim McNeely,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-02 07:22:54

Los eventos nativos de los componentes no son accesibles directamente desde los elementos padre. En su lugar, debe probar v-on:click.native="testFunction", o también puede emitir un evento desde el componente Test. Como v-on:click="$emit('click')".

 2
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-04 20:42:12

Un poco detallado, pero así es como lo hago:

@click="$emit('click', $event)"

 1
Author: Neps,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-22 20:46:02