Todo funcionó perfectamente bien hasta que de repente dejó de funcionar.
Tengo un botón con un evento de clic. Cuando hago clic en él, llama al método giveToParent() que emite una cadena:
<template> <div> <button @click="giveToParent()">search</button> </div> </template> <script> export default { ... methods: { giveToParent() { var sql = "select * from xxxxx where min_Price=20"; this.$emit("clicked", sql); console.log(this.$emit("clicked", sql)); },En el padre (app.vue) se ve así:
<template> <Menu_Filter @clicked="test()"></Menu_Filter> </template> <script> import Menu_Filter from "./components/Menu_Filter"; import { loadMap } from "./packs/my_js_file.js"; export default { ... }, methods: { test(value) { logInConsole(value); loadMap(value); }, }, }; El mensaje de error es el siguiente:
Como puede ver, dice que el objeto no es una función, lo cual es cierto, porque la función $emit parece ser un componente vue. Puedo registrar otra cosa sin problema, así que tiene que ser la función $emit.
Lo raro es que todo funcionó y de repente ya no. Incluso tenía una versión anterior de esto en mi computadora portátil y cuando traté de ejecutarlo allí, también falló.
En serio, no sé por qué ya no funciona.
<template> <div> <button @click="giveToParent">search</button> </div> </template>Esto debería funcionar, a v-on no le gusta llamarlo como una función sin argumentos.
¿Puedes probar con click.native ? No estoy seguro, pero creo que puedes resolverlo con este truco.
<div id="app"> <Menu_Filter v-on:click.native="testFunction"></Menu_Filter> </div>