我的应用程序中的所有内容都完美无缺,直到我开始添加我的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>
答案 0 :(得分:3)
您正在使用Single-File Component(.vue
文件),这是vue-loader
使用的Vue组件定义的文件格式。
.vue
文件的脚本部分(<script>
标记内的内容)应该导出一个指定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
属性必须是返回数据属性的函数。 See the "Why does data
need to be a function" section of Vue's Common Beginner Gotchas page.