Свойство или метод не определены в файле.vue

Question

Все в моем приложении работало отлично, пока я не начал добавлять свой JavaScript. Теперь я постоянно получаю ошибки в консоли.

Я получаю эту ошибку:

Свойство или метод "show" не определен в экземпляре, но на него ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, путем инициализации свойства.

Как и эта ошибка:

TypeError: _vm.show is not a function
  at click App.vue?d98c:25
  at HTMLButtonElement.invoker vue.esm.js?efeb:1906

Желаемый результат: нажмите на кнопку "loginBtn" и нажмите "click".

---

Мой код:

// app.vue script 
export default {
  name: 'app'
}

var show = new Vue({
  el: '#loginBtn',
  data: {
    n: 0
  },
  methods: {
    show: function(event) {
      targetId = event.currentTarget.id;
      alert('click')
    }
  }
})

<!-- the button -->
<template>
  <div>
    <button v-on:click="show($event)" id="loginBtn">Login</button>
  </div>
</template>

Answer 1

Вы используете однофайловый компонент (.vue file), который является форматом файла для определения компонента Vue, используемого vue-loader,

Раздел сценария.vueфайл (что внутри<script>tag) должен экспортировать объект, определяющий определение экземпляра Vue.

Из документации:

Сценарий должен экспортировать объект параметров компонента Vue.js. Экспорт расширенного конструктора, созданного с помощью Vue.extend(), также поддерживается, но предпочтительным является простой объект.

---

Вы в настоящее время только экспортируете{ name: 'app' }вот почему Vue не может найтиshowметод.

Ваш<script>раздел должен выглядеть так:

<script>
  export default {
    name: 'app',
    data() {
      return { n: 0 }
    },
    methods: {
      show: function(event) {
        targetId = event.currentTarget.id;
        alert('click')
      }
    }
  }
</script>

Обратите внимание также, чтоdataСвойство экспортируемого объекта должно быть функцией, возвращающей свойства данных. Смотрите "Почему data должен быть функциональным разделом страницы общего новичка Gotchas.