-1

I'm not sure what happened during the updates that I've made but I've now received an error that I did not get previously. I've got a section of code in my pages folder under 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>

And this section of code under the default.vue file in layouts:

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

I also have this code under the AppButton.vue file located under components:

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

The error states: "[Vue warn]: Property or method "onSave" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property." I have not had this issue before and do not know why it is appearing now. Has something changed in Vue and nuxt.js?

jackie
  • 39
  • 8

1 Answers1

1

You should define onSave method.

export default {
  components: {
    AppButton
  },
  methods: {
    onSave() {
      // do something
    }
  }
}
michael
  • 4,053
  • 2
  • 12
  • 31