Vue.js点击显示/隐藏组件功能实现问题求助

我尝试实现点击显示/隐藏元素的功能，试过多种方法，但觉得自己的方法设置有问题。

我的 Main.js 代码 #

import './assets/main.css'
import home from '../src/pages/home.vue'
import boards from '../src/pages/boards.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { createApp } from 'vue'
import App from './App.vue'
import masonry from 'vue-next-masonry';

const Home = { template: home}
const Boards = { template: boards}

const routes = [
    { path: '/', name: "home", component: home},
    { path: '/boards', name: "boards", component: boards},
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,

})


createApp(App).use(router).use(masonry).mount('#app')

尝试实现功能的代码片段 #

<script>
export default {
    methods: {
        showComponent() {
                this.$refs.card.show();
            
        },

        hideComponent() {
            this.$refs.card.hide();
        }
    },
}
</script>

<template>
    <div class="m-10">
        <h1 class="text-gray-200 font-sans md:font-mono text-center text-4xl mb-5">Welcome to your feed.</h1>
            <masonry :cols="4" :gutter="10">
                <div v-for="(image, index) in images" :key="image">
                    <button @click="showComponent">
                        <img class="transition ease-in-out delay-150 hover:opacity-10 h-auto max-w-full rounded-lg mt-2" :src="image.src">
                    </button>
                </div>
            </masonry>
        </div>
    <div v-if="showComponent" id="card" class="box-border h-128 w-128 p-4 border-4 bg-gray-300">
        <h1>Test</h1>
        <button @click="hideComponent">
            <h1>Close</h1>
        </button>
    </div>
</template>

<style>

</style>

我已查看相关问题，但仍无法解决，认为自己遗漏了某些内容。

问题分析与修复方案 #

你的代码存在两个核心问题：

1. 错误使用方法名作为v-if判断条件：v-if需要绑定布尔值来控制显示，而你用方法名showComponent作为判断依据，这不符合Vue的响应式规则。
2. 不必要的DOM直接操作：Vue提倡用数据驱动视图，你尝试调用this.$refs.card.show()/hide()直接操作DOM元素，这种方式既不符合Vue设计理念，也容易引发问题。

修复后的完整代码如下：

<script>
export default {
    data() {
        return {
            // 定义响应式变量控制卡片显示状态，初始隐藏
            isCardVisible: false
        }
    },
    methods: {
        showComponent() {
            this.isCardVisible = true;
        },
        hideComponent() {
            this.isCardVisible = false;
        }
    },
}
</script>

<template>
    <div class="m-10">
        <h1 class="text-gray-200 font-sans md:font-mono text-center text-4xl mb-5">Welcome to your feed.</h1>
            <masonry :cols="4" :gutter="10">
                <div v-for="(image, index) in images" :key="image.src">
                    <button @click="showComponent">
                        <img class="transition ease-in-out delay-150 hover:opacity-10 h-auto max-w-full rounded-lg mt-2" :src="image.src">
                    </button>
                </div>
            </masonry>
        </div>
    <div v-if="isCardVisible" class="box-border h-128 w-128 p-4 border-4 bg-gray-300">
        <h1>Test</h1>
        <button @click="hideComponent">
            <h1>Close</h1>
        </button>
    </div>
</template>

<style>

</style>

关键修改点：

• 在data中添加isCardVisible响应式变量，初始值为false
• 修改方法逻辑：直接通过改变isCardVisible的值控制显示/隐藏
• 将v-if="showComponent"改为v-if="isCardVisible"，绑定正确的布尔变量
• 优化v-for的key值，用image.src代替image，避免重复渲染问题

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