如何解决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 举报,一经查实,本站将立刻删除。