[英]vuejs2 onclick will not call defined method function
Very simple but seems to not be working.非常简单,但似乎不起作用。 Must be because i'm new to VueJS.一定是因为我是 VueJS 的新手。 I downloaded this repo https://github.com/creotip/vue-particles .我下载了这个 repo https://github.com/creotip/vue-particles 。 As I want to create a under construction page using this style.因为我想使用这种样式创建一个正在建设的页面。
Problem: I need to create a hamburger menu icon in the top right hand corner which on click calls a method to hide and show a div ( really basic stuff ).问题:我需要在右上角创建一个汉堡菜单图标,单击它会调用一个隐藏和显示 div 的方法(非常基本的东西)。 I've followed the vue JS tutorials and what people have said on stack overflow but I just cant get my template to speak to the method.我已经遵循了 vue JS 教程以及人们对堆栈溢出的看法,但我无法让我的模板与该方法对话。
When I click on the hamburger button i keep getting "_vm.hello is not a function".当我单击汉堡包按钮时,我不断收到“_vm.hello 不是函数”。 What am i doing wrong?我究竟做错了什么? Please see screenshot.请看截图。 There must be something simple to solve this.必须有一些简单的方法来解决这个问题。
Heres what my code looks like:-这是我的代码的样子:-
app.vue应用程序.vue
<template>
<div id="app">
<div class="wrap-banner">
<div class="button_container" @click="hello()">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</template>
main.js main.js
import Vue from 'vue'
import App from './App'
import Home from './components/home'
Vue.use(Home)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App },
methods: {
hello: function() {
alert('hello')
}
}
})
Screenshot截屏
You need to move hello
method to App.vue
您需要将hello
方法移动到App.vue
App.vue应用程序.vue
<template>
<div id="app">
<div class="wrap-banner">
<div class="button_container" @click="hello">
Demo Panel
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {};
},
methods: {
hello: function() {
alert("hello");
}
}
};
</script>
main.js main.js
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Checkout demo at https://codesandbox.io/s/8y5yzv00nj在https://codesandbox.io/s/8y5yzv00nj结帐演示
Vue File Architecture Vue 文件架构
You need to be aware that a Vue file normally has 3 components (HTML, Js and CSS).您需要注意,一个 Vue 文件通常包含 3 个组件(HTML、Js 和 CSS)。 This file then needs to be processed with a compiler (babel for example) in order to make it readable for the browser.然后需要使用编译器(例如 babel)处理该文件,以使其对浏览器可读。 See Vue Single File Components for more information.有关更多信息,请参阅Vue 单文件组件。
Clean Solution清洁解决方案
The vue-cli gives you a working starter template with babel and webpack all preconfigured. vue-cli 为您提供了一个工作的入门模板,其中 babel 和 webpack 都已预先配置。 Just create a vue project and change the template as needed.只需创建一个 vue 项目并根据需要更改模板。
Quick Solution快速解决方案
If you do not want to use a compiler, just implement it like following:如果您不想使用编译器,只需按如下方式实现它:
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { hello: function() { alert('hello') } } })
<script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> <button @click="hello()">Click me</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.