Property or method (…) is not defined on the instance but referenced during render

Question

"Property or method "show" 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"

This is my code.

<script>
import { SlideYUpTransition } from 'vue2-transitions'

export default {
  data: () => ({
    listitems: [{
        title: '출결관리',
        path: '/attendanceCheck'
      },
      {
        title: '학생관리',
        path: '/studentAdministration'
      },
      {
        title: '알림설정',
        path: '/notificationSetting'
      }
    ],
    components: {
      SlideYUpTransition
    },
    data() {
      return {
        show: true
      }
    }
  })
}
</script>

<style>

/*-- Contents --*/
/* .content {
  width: 580px;
  padding: 20px;
  margin-bottom: 20px;
  float: left;
} */


@media ( max-width: 480px) {
  .container {
    width: auto;
  }
  .content {
    float: none;
    width: auto;
  }
}
</style>

<template>

  <!-- Contents ( Image, Notice ) -->
  <div class = "contents">
    <section>
        <v-parallax src="/images/bg.png" height="650"></v-parallax>
    </section>
    <slide-y-up-transition  >
      <div v-show="show">Your content here</div>
    </slide-y-up-transition>
  </div>
</template>

In the first script you post, inside export default, I see two data function, I think you should use only one data function and put all the reactive data in there — Giacomo Ciampoli

Ignatius Andrew Ignatius Andrew · Accepted Answer · 2018-12-03T11:02:38

The primary reason for this error is that you might have used a "model" inside the "template" tag, but forgot to declare in the "data" section inside the "script" tag.

For Ex:

<template>
    <el-form ref="form" :model="form" label-width="120px"> ##<=== form model used here
        <el-form-item label="Name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
  </el-form>
 </template>

But inside your "Script" tag you might have not used it

export default {

  data: () => ({

      form:{
          name: ''   <----- Declare andd initialize here
          }

  }),


  methods:{

  },

  components: {

  }
};

This will solve your problem....

Property or method (…) is not defined on the instance but referenced during render

2 Answers