.vue文件中未定义的属性或方法

时间:2017-10-16 16:33:09

标签: javascript vue.js vuejs2 vue-loader

我的应用程序中的所有内容都完美无缺,直到我开始添加我的javascript。现在我在控制台中不断出错。

我收到此错误:

  

属性或方法“show”未在实例上定义,但在呈现期间引用。通过初始化属性,确保此属性在数据选项或基于类的组件中是被动的。

以及此错误:

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

所需结果:点击“loginBtn”警告提示“点击”。

我的代码:

// 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>

1 个答案:

答案 0 :(得分:3)

您正在使用Single-File Component.vue文件),这是vue-loader使用的Vue组件定义的文件格式。

.vue文件的脚本部分(<script>标记内的内容)应该导出一个指定Vue实例定义的对象。

From the documentation:

  

脚本必须导出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属性必须是返回数据属性的函数。 See the "Why does data need to be a function" section of Vue's Common Beginner Gotchas page.