VueJS JSX:我怎么能听一个"单击";事件

Question

我目前正在构建一个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路径，所以会有很多缺点，希望每个人都能告诉我哪里错了。如有任何意见，我们将不胜感激。非常感谢大家！

Answer 1

您错过了onClick道具中的回调函数

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