Javascript .vue文件中未定义属性或方法_Javascript_Vue.js_Vuejs2_Vue Loader

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

javascript vue.js vuejs2

Javascript .vue文件中未定义属性或方法,javascript,vue.js,vuejs2,vue-loader,Javascript,Vue.js,Vuejs2,Vue Loader,在我开始添加javascript之前，我的应用程序中的一切都运行得非常好。现在我在控制台中不断地出现错误我得到这个错误：属性或方法“show”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或在基于类的组件中是被动的。以及这个错误：预期结果：单击“loginBtn”警报提示“单击” 我的代码： // app.vue script export default { name: 'app' } var show = new Vue({ el: '#lo

在我开始添加javascript之前，我的应用程序中的一切都运行得非常好。现在我在控制台中不断地出现错误

我得到这个错误：

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

以及这个错误：

预期结果：单击“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')
    }
  }
})


登录

您使用的是（a

.vue

文件），这是所使用的vue组件定义的文件格式

.vue

文件的脚本部分（在

标记中的内容）应该导出一个指定vue实例定义的对象

脚本必须导出Vue.js组件选项对象。还支持导出由Vue.extend（）创建的扩展构造函数，但首选普通对象

您当前仅导出

{name:'app'}

，这就是Vue找不到

show

方法的原因

您的

部分应如下所示：

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


导出默认值{
名称：“应用程序”，
数据（）{
返回{n:0}
},
方法：{
显示：功能（事件）{
targetId=event.currentTarget.id；
警报（'单击'）
}
}
}

还请注意，导出的对象的

data

属性需要是返回数据属性的函数