未在實例上定義屬性或方法（…），但在渲染期間引用了該屬性或方法

Question

“屬性或方法“ show”未在實例上定義，但在渲染過程中被引用。通過初始化屬性，確保該屬性在data選項中或對於基於類的組件都是反應性的”

這是我的代碼。

 <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

組件的結構應具有data和components作為頂級屬性：

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

data是一個返回組件狀態的函數，而components是一個對象。

Answer 2

發生此錯誤的主要原因是您可能在“ template ”標簽內使用了“ model ”，但忘記了在“ script ”標簽內的“數據”部分中聲明。

例如：

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

但是在“ Script ”標簽中，您可能沒有使用過它

export default {

  data: () => ({

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

  }),


  methods:{

  },

  components: {

  }
};

這將解決您的問題。