[英]VueJS JSX: How can I listen to a "Click" event on a render function?
I'm currently building a SPA app, and here is my problem:我目前正在构建一个SPA应用程序,这是我的问题:
I want to create a search bar, and when I click on it, a popup with 3 options will be shown我想创建一个搜索栏,当我点击它时,将显示一个包含 3 个选项的弹出窗口
I have created it with a computed property and by returning 3 buttons, and then call it to render those items:我使用计算属性创建了它并返回 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> ); }); } }
The problem is, inside the computed search_Type_List()
scope, I used onClick="createQuery(type)"
, with createQuery()
as a method.问题是,在计算的
search_Type_List()
scope 中,我使用了onClick="createQuery(type)"
,并使用createQuery()
作为方法。
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.我刚刚开始我的VueJS路径,所以会有很多不足之处,希望大家能告诉我我哪里出错了。 Any comments will be appreciated.
任何意见将不胜感激。 Many thanks everyone !
非常感谢大家!
you missed callback function in onClick prop你错过了onClick道具中的回调 function
onClick={(event) => {
// do something
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.