VueJS JSX：如何收听渲染函数上的“ Click”事件？

问题描述

我当前正在构建 SPA 应用，这是我的问题：

• 我想创建一个搜索栏，当我单击它时，将显示一个带有3个选项的弹出窗口

• 我已经使用计算属性创建了它，并返回了3个按钮，然后调用它来渲染这些项目：

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

• 问题是，在计算的search_Type_List()范围内，我使用了onClick="createquery(type)"和createquery()作为方法。

• 我希望每次单击按钮时，它都返回按钮的文本，但是会引发错误：

[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)

我刚刚开始我的 VueJS 道路，所以会有很多缺点，希望每个人都可以告诉我我哪里出了问题。任何意见将不胜感激。非常感谢大家！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）