[Предупреждение Vue]: свойство или метод onSave не определено в экземпляре, но на него ссылаются во время рендеринга

Я не уверен, что произошло во время обновлений, которые я сделал, но теперь я получил сообщение об ошибке, которого раньше не было. У меня есть раздел кода в папке моих страниц в index.vue:

<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>

И этот участок кода в файле 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?


person jackie    schedule 30.11.2020    source источник


Ответы (1)


Вы должны определить метод onSave.

export default {
  components: {
    AppButton
  },
  methods: {
    onSave() {
      // do something
    }
  }
}
person baymax    schedule 30.11.2020