[Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render [duplicate]答案

【问题标题】：[Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render [duplicate][Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render [duplicate]
【发布时间】：2021-03-12 00:22:41
【问题描述】：

我不确定在我所做的更新期间发生了什么，但我现在收到了一个以前没有收到的错误。我在 index.vue 下的 pages 文件夹中有一段代码：

<section class="intro">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <nuxt-link to="/admin">
    <AppButton
      type="submit"
      @click="onSave">
      Start Here
    </AppButton>
  </nuxt-link>
  <nuxt-link to="/connect">
    <AppButton
      type="submit"
      @click="onSave">
      Contact Us
    </AppButton>
  </nuxt-link>
</section>

<script>
import AppButton from '@/components/UI/AppButton'

export default {
  components: {
    AppButton
  }
}
</script>

还有layouts中default.vue文件下的这段代码：

<template>
  <div>
    <TheHeader @sidenavToggle="displaySidenav = !displaySideNav" />

    <Nuxt />

    <TheFooter />
  </div>
</template>

<script>
import TheHeader from '@/components/Navigation/TheHeader'
import TheFooter from '@/components/Navigation/TheFooter'

export default {
  components: {
    TheHeader,
    TheFooter
  }

}
</script>

我在组件下的 AppButton.vue 文件下也有这段代码：

<template>
  <button
    class="button"
    :class="btnStyle"
    v-bind="$attrs"
    v-on="$listeners">
    <slot />
  </button>
</template>

<script>

export default {
  name: 'AppButton',
  props: {
    btnStyle: {
      type: String,
      default: ''
    }
  }
}

</script>

错误状态：“[Vue 警告]：属性或方法“onSave”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。”我以前没有遇到过这个问题，不知道为什么现在会出现。 Vue 和 nuxt.js 有什么变化吗？

【问题讨论】：

标签： javascript vue.js vue-component nuxt.js nuxtjs

【解决方案1】：

你应该定义onSave方法。

export default {
  components: {
    AppButton
  },
  methods: {
    onSave() {
      // do something
    }
  }
}

【讨论】：