when calling $emit: [Vue warn]: Error in v-on handler: "TypeError: Object(...) is not a functio-CodePudding

Everything worked perfectly fine until all of a sudden it didn't anymore.

I have a button with a on-click event. When I click on it, it calls the method giveToParent() which emits a string:

<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));
    },

In the parent (app.vue) it looks like this:

<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);
    },
    
  },
};

The error message is the following: As you can see, it says object is not a function, which is true, because the $emit function seems to be a vue component. I can log something else with no problem, so it has to be the $emit function.

The weird thing is that it all worked and suddenly it didn't anymore. I even had an older version of this on my laptop and when I tried to execute it there, it failed as well.

I seriously don't know why is doesn't work anymore.

CodePudding user response：

<template>
  <div>
    <button @click="giveToParent">search</button>
  </div>
</template>

This should do the trick, v-on does not like calling it as a function without arguments.

CodePudding user response：

can you test with click.native? I'm not sure but I opine you can solve it with this trick

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