我当前正在构建 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 道路,所以会有很多缺点,希望每个人都可以告诉我我哪里出了问题。任何意见将不胜感激。非常感谢大家!