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