属性或方法“greet”未在实例上定义，但在渲染期间被引用答案

【问题标题】：Property or method "greet" is not defined on the instance but referenced during render属性或方法“greet”未在实例上定义，但在渲染期间被引用
【发布时间】：2020-09-10 04:52:35
【问题描述】：

同时我遇到另一个错误，即“事件“单击”的处理程序无效”。

<template>
    
    <div id="example-2">
      <!-- `greet` is the name of a method defined below -->
      <button v-on:click="greet">Greet</button>
    </div>
    
    </template>
    
    <script>
    window.onload = function () {
    
    var example2 = new Vue({
      el: '#example-2',
      data: {
        name: 'Vue.js'
      },
      // creating method greet
      methods: {
        greet: function (event) {
          // `this` inside methods points to the Vue instance
          alert('Hello ' + this.name + '!')
          // `event` is the native DOM event
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    
    }
    
    </script>

【问题讨论】：

从未见过有人将脚本内容放在 window.onload = function () { 内的 .vue 文件中...尽量不要这样做
这是什么文件？除非您正在编写单文件 Vue 组件，否则您不能真正使用 <template> 标签。如果它是单文件组件，您通常不会在其中创建新的 Vue 实例。见vuejs.org/v2/guide/single-file-components.html
@JaromandaX 如果我删除“window.onload = function ()”，我会收到此错误。 “找不到元素：#example-2”
@Phil 那么你能指导我在没有
阅读vuejs.org/v2/guide

标签： javascript html vue.js

【解决方案1】：

当 HTML 加载时，template 标签是隐藏的，所以你会得到错误cannot find element 或类似的东西。您可以使用 javascript 加载它。

Vue.js 不使用内置的template 标签。

但是，如果您在 cdn 上使用它，请尝试这样

  <div id="example-2">
    <button v-on:click="greet">Greet</button>
  </div>

  <script>
    var example2 = new Vue({
      el: "#example-2",
      data: {
        name: "Vue.js",
      },
      methods: {
        greet: function(event) {
          alert("Hello " + this.name + "!");
          if (event) {
            alert(event.target.tagName);
          }
        },
      },
    });
  </script>

【讨论】：

【解决方案2】：

您可以简单地删除template 标签

这是工作代码： https://jsfiddle.net/t49zxdov/2/

<div id="example-2">
      <!-- `greet` is the name of a method defined below -->
      <button v-on:click="greet">Greet</button>
    </div>

window.onload = function () {
    
        var example2 = new Vue({
      el: '#example-2',
      data: {
        name: 'Vue.js'
      },
      // creating method greet
      methods: {
        greet: function (event) {
          // `this` inside methods points to the Vue instance
          alert('Hello ' + this.name + '!')
          // `event` is the native DOM event
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    
    }

【讨论】：

【解决方案3】：

您应该将您的 vue 模板和 vue 实例分开。为此，

创建文件，例如：example.vue 复制这段代码

<template>
    <div id="example-2">
      <!-- `greet` is the name of a method defined below -->
      <button v-on:click="greet">Greet</button>
    </div>
</template>
<script>
  data() {
     return {
         name: 'Vue.js'
     }
  },
  methods: {
        greet: function (event) {
          // `this` inside methods points to the Vue instance
          alert('Hello ' + this.name + '!')
          // `event` is the native DOM event
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
</script>

并创建此文件，例如：app.js

const app = new Vue({
    el: '#example-2', 
});

然后将您的 app.js 链接到您的索引布局。

我希望你明白我的意思。谢谢

【讨论】：