Vue方法无法切换变量状态及父元素异常渲染问题求助

我有如下div，默认将mostrarInfo设为false，此时v-if绑定的alert不会渲染，这部分正常：

<div id="infoMnjEnviado"> 
    <div class="alert alert-info alert-dismissible fade show" role="alert" v-if="mostrarInfo"> 
        <strong>Mensaje enviado!</strong> 
        <br>        

        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

    </div>
</div>

我还有一个用于显示上述alert的按钮：

<a class="btn btn-success" id="envForm" v-on:click="mostrarInfoMensaje">Enviar</a>

对应的Vue脚本逻辑如下：

<script>
        const app = Vue.createApp({
        data() {
            return {
                mostrarInfo: false
            }
        },
        methods: {
            mostrarInfoMensaje() {
                this.mostrarInfo = true
            }
        }
    })
    app.mount('#infoMnjEnviado')
</script>

疑问 #

1. 为什么mostrarInfo变量始终无法被设为true？
2. id为infoMnjEnviado的div会被频繁创建和销毁，导致不良效果，该如何避免？只能用d-none类吗？

一、mostrarInfo无法设为true的原因 #

触发点击事件的按钮不在Vue实例挂载的容器#infoMnjEnviado内部。Vue只会处理挂载容器范围内的模板逻辑，容器外的元素无法触发实例内的方法。

解决方式：

• 把按钮移到#infoMnjEnviado的div内部；
• 或者将Vue实例挂载到一个同时包含按钮和alert的父容器上。比如新增一个父容器<div id="app">，将按钮和alert都放入其中，然后修改挂载目标：

<div id="app">
    <a class="btn btn-success" id="envForm" v-on:click="mostrarInfoMensaje">Enviar</a>
    <div id="infoMnjEnviado"> 
        <div class="alert alert-info alert-dismissible fade show" role="alert" v-if="mostrarInfo"> 
            <strong>Mensaje enviado!</strong> 
            <br>        
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
</div>

脚本中修改挂载目标：

app.mount('#app')

二、避免元素频繁创建销毁的方法 #

不用局限于d-none类，Vue提供的v-show指令更适合这个场景。v-show通过CSS的display属性切换元素的显示/隐藏，元素始终存在于DOM中，不会触发创建或销毁操作。

修改步骤：

1. 将alert上的v-if="mostrarInfo"替换为v-show="mostrarInfo"；
2. 注意Bootstrap的data-bs-dismiss="alert"会直接从DOM中移除alert元素，和v-show的逻辑冲突，需要改用Vue控制关闭状态：

<button type="button" class="btn-close" aria-label="Close" @click="mostrarInfo = false"></button>

这样点击关闭按钮时，通过修改Vue的状态来隐藏alert，元素不会被销毁，彻底解决频繁创建销毁的问题。

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