Vue3动态显示隐藏组件
Vue2用v-if或者v-show就直接完事了,可是vue3却没反应,需要设置强制重新渲染。
·
Vue2用v-if或者v-show就直接完事了,可是vue3却没反应,需要设置强制重新渲染。
且Vue3使用this.$forceUpdate会报错
一、在Vue3中使用$forceUpdate
import {getCurrentInstance} from 'vue';
const instance = getCurrentInstance();
instance.proxy.$forceUpdate();
二、具体应用
<template>
<div class="timeLine">
<el-divider content-position="center">Vertex TimeLine</el-divider>
<span class="description" @click="setActive(Data)">
{{ Data.description }}
</span>
<span class="green">RUNNING</span>
<subTask v-if="Active"/>
</div>
</template>
<script setup>
import { ref,getCurrentInstance } from "vue";
import subTask from "./subTask.vue";
let whoActive = ref()
let Active = false
const instance = getCurrentInstance();
const Data =
{
description: "Source: kafka-source -> Flat Map",
}
const setActive = (item) => {
whoActive = item.description
Active = !Active
instance.proxy.$forceUpdate()
console.log(whoActive, Active)
}
</script>
更多推荐
已为社区贡献6条内容
所有评论(0)