1

在我开始添加我的 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>
4

1 回答 1

4

您正在使用单文件组件（.vue文件），它是 .vue 使用的 Vue 组件定义的文件格式vue-loader。

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

从文档中：

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

您目前只是在 exporting { 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导出对象的属性需要是返回数据属性的函数。请参阅 Vue 的 Common Beginner Gotchas 页面的“为什么data需要成为函数”部分。

于 2017-10-16T16:40:16.050 回答