未在实例上定义属性或方法（…），但在渲染期间引用了该属性或方法

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> 

Answer 1

The structure of your component should have data and components as top-level properties:

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

data is a function that returns the state of the component, and components is an object.

Answer 2

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