Vue报错：实例未定义"show"属性/方法却在渲染时引用的问题排查

Hey there, let's break down and fix this error you're encountering. The core issue here is straightforward: your template is referencing a property called show, but your Vue component instance doesn't have this property declared as reactive data (or as a prop).

Why this happens #

Vue 2 requires any property you use in your template (for things like v-if="show", v-show="show", or binding to attributes) to be either:

• Defined in the data option of your component, so Vue can make it reactive
• Passed into the component as a prop from a parent component

Looking at the code snippet you shared, your data function only includes listitems—no show property exists here, which is exactly why the error is thrown.

Solution 1: Add show to your component's data #

If show is a property that belongs to this component (not passed from a parent), add it to your data function with an initial value (like false or true, depending on your needs):

<script>
import { SlideYUpTransition } from 'vue2-transitions'
export default {
  data: () => ({
    // Add the show property here with your desired initial state
    show: false,
    listitems: [
      { title: '출결관리', path: '/attendanceCheck' },
      { title: '학생관리', path: '/studentAdministration' },
      { title: '알림설정', path: '/notificationSetting' }
    ],
    // Rest of your existing code...
  }),
  // Other component options (components, methods, etc.)
  components: {
    SlideYUpTransition
  }
}
</script>

Solution 2: Declare show as a prop (if it's coming from a parent) #

If show is supposed to be passed in from a parent component, define it in the props option instead:

<script>
import { SlideYUpTransition } from 'vue2-transitions'
export default {
  props: {
    show: {
      type: Boolean,
      default: false // Set a default if needed
    }
  },
  data: () => ({
    listitems: [
      { title: '출결관리', path: '/attendanceCheck' },
      { title: '학생관리', path: '/studentAdministration' },
      { title: '알림설정', path: '/notificationSetting' }
    ],
    // Rest of your existing code...
  }),
  components: {
    SlideYUpTransition
  }
}
</script>

Quick check #

Double-check your template to make sure you're using show correctly once you've added it. For example, if you're using the SlideYUpTransition component, you might have something like this in your template:

<slide-y-up-transition>
  <div v-if="show">Your content here</div>
</slide-y-up-transition>

With the show property now declared, this should work without errors.

内容的提问来源于stack exchange，提问作者ooolander