VueJS JSX: How can I listen to a "Click" event on a render function?

Question

I'm currently building a SPA app, and here is my problem:

• I want to create a search bar, and when I click on it, a popup with 3 options will be shown

• I have created it with a computed property and by returning 3 buttons, and then call it to render those items:

      methods: {
        createQuery() {
          console.log("Click");
        }
      },
      data() {
        return {
          search_Types: ["Sites", "Pages", "Advance Search"]
        };
      },
      computed: {
        // I will use this value in a render function
        search_Type_List() {
          return this.search_Types.map(function(type) {
            return (
              <button class="btn" onClick={this.createQuery({type})}>
                {type}
              </button>
            );
          });
        }
      }

• The problem is, inside the computed search_Type_List() scope, I used onClick="createQuery(type)", with createQuery() as a method.

• I want that every time a button is clicked, it returns the button's text, but it raises an error:

[Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
    
    found in
    
    ---> <SearchBar> at src/components/SearchBar.vue
           <App> at src/App.vue
             <Root>
    warn @ vue.runtime.esm.js?2b0e:619
    logError @ vue.runtime.esm.js?2b0e:1884
    globalHandleError @ vue.runtime.esm.js?2b0e:1879
    handleError @ vue.runtime.esm.js?2b0e:1839
    invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
    invoker @ vue.runtime.esm.js?2b0e:2179
    original._wrapper @ vue.runtime.esm.js?2b0e:6917
    vue.runtime.esm.js?2b0e:1888 

    TypeError: handler.apply is not a function
            at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
            at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
            at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

I just started my VueJS path so there will be many shortcomings, hope everyone can tell me where I went wrong. Any comments will be appreciated. Many thanks everyone !

Answer 1

you missed callback function in onClick prop

onClick={(event) => {
  // do something
}}