vuejs2 onclick не будет вызывать функцию определенного метода

Question

Очень просто, но, похоже, не работает. Должно быть, потому что я новичок в VueJS. Я скачал этот репозиторий https://github.com/creotip/vue-particles. Поскольку я хочу создать строящуюся страницу, используя этот стиль.

Проблема: мне нужно создать значок меню гамбургера в верхнем правом углу, который при щелчке вызывает метод, чтобы скрыть и показать div (действительно базовый материал). Я следовал учебникам по Vue JS и тому, что люди говорили о переполнении стека, но я просто не могу заставить свой шаблон говорить с методом.

Когда я нажимаю кнопку гамбургера, я продолжаю получать сообщение «_vm.hello - это не функция». Что я делаю неправильно? Пожалуйста, смотрите скриншот. Должно быть что-то простое, чтобы решить эту проблему.

Вот как выглядит мой код: -

app.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

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')
    }
  }
})

Скриншот

Answer 1

Архитектура файлов Vue

Вы должны знать, что файл Vue обычно имеет 3 компонента (HTML, Js и CSS). Затем этот файл необходимо обработать с помощью компилятора (например, babel), чтобы сделать его читаемым для браузера. См. Vue Single File Components для получения дополнительной информации.

Чистый раствор

Vue-cli дает вам рабочий стартовый шаблон с предварительно настроенными babel и webpack. Просто создайте проект Vue и измените шаблон по мере необходимости.

1. Установка Vue-CLI
2. vue create my-project
3. npm run dev

Быстрое решение

Если вы не хотите использовать компилятор, просто реализуйте его следующим образом:

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>

Answer 2

Вам нужно переместить hello метод на App.vue

App.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

import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Оформить заказ на https://codesandbox.io/s/8y5yzv00nj