Property "value" was accessed during render but is not defined on instance.

Question

Property "value" was accessed during render but is not defined on instance.

v-show的话动画会没，但是运行没问题，v-if会报warning且图片不显示

const require = getCurrentInstance()?.appContext.config.globalProperties.$require;
const images : object = reactive([
  {
    imgSrc: require('upload/d53249debe.png'),
    isShow: true
  },
  {
    imgSrc: require('upload/c899d76003.png'),
    isShow: false
  },
  {
    imgSrc: require('upload/d6aaafacf5.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/66f0702470.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/47c44c6d8f.png'),
    isShow: false
  },
  {
    imgSrc: require('upload/e0ea670feb.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/19d2526616.png'),
    isShow: false
  }
]);

main.ts

const app = createApp(App);
app.config.globalProperties.$require = name => {
    return new URL(`./assets/${name}`,import.meta.url).href;
};

html

<transition-group name="toggle">
  <li class="carousel-list-item" v-for="(val,index) in images" :key="index" v-if="val && val.isShow">
     <img :src="val.imgSrc" alt="carousel" />
  </li>
</transition-group>

css

.toggle-leave-to,
.toggle-enter {
  opacity: 0;
}
.toggle-leave-to,
.toggle-enter-active {
  opacity: 1;
  transition: opacity 0.8s linear;
}

Answer 1

根据你提供的代码和错误信息，错误是因为在模板中访问了value属性，但是在实例中没有定义该属性导致的。具体来说是在组件中使用v-for循环images数组，其中v-if指令依赖于images数组中的isShow属性，而isShow没有在组件实例中定义。

提供一个修复方案，你可以在组件实例中定义isShow属性来解决该问题：

<script setup>
import { reactive } from 'vue'

const require = getCurrentInstance()?.appContext.config.globalProperties.$require;
const images = reactive([
  {
    imgSrc: require('upload/d53249debe.png'),
    isShow: true
  },
  {
    imgSrc: require('upload/c899d76003.png'),
    isShow: false
  },
  {
    imgSrc: require('upload/d6aaafacf5.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/66f0702470.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/47c44c6d8f.png'),
    isShow: false
  },
  {
    imgSrc: require('upload/e0ea670feb.jpg'),
    isShow: false
  },
  {
    imgSrc: require('upload/19d2526616.png'),
    isShow: false
  }
]);

// 在组件实例中定义isShow属性
setup() {
  const isShow = ref(true);
  return { images, isShow }
}
</script>

<template>
  <transition-group name="toggle">
    <li class="carousel-list-item" v-for="(val,index) in images" :key="index" v-if="val && val.isShow">
       <img :src="val.imgSrc" alt="carousel" />
    </li>
  </transition-group>
</template>

<style scoped>
.toggle-leave-to,
.toggle-enter {
  opacity: 0;
}
.toggle-leave-to,
.toggle-enter-active {
  opacity: 1;
  transition: opacity 0.8s linear;
}
</style>

此外，在使用组件时要注意，不能将v-if和v-show同时使用，因为它们的作用是不同的。如果需要在动画中显示/隐藏元素，可以使用v-if，然后将其包装在一个或组件中，再使用特定的 CSS 过渡类名实现动画效果。如果只需要显示/隐藏元素而不需要动画，建议使用v-show。