[英]VueJS JSX: How can I listen to a "Click" event on a render function?
我目前正在構建一個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()
scope 中,我使用了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路徑,所以會有很多不足之處,希望大家能告訴我我哪里出錯了。 任何意見將不勝感激。 非常感謝大家!
你錯過了onClick道具中的回調 function
onClick={(event) => {
// do something
}}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.