Vue 触发器重新渲染 html，即使计算的属性没有改变

Question

我有一个带有内容在内的内容的bootstrap模式。我已经计算出控制选项卡和窗格的活动/隐藏类的属性。

<div class="modal fade" aria-hidden="true" style="display: none;" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">{{ header }}</h4>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-tabs">
                            <li class="" v-bind:class="[(tab1_visible.val ? null : 'hidden'), (tab1_active.val ? 'active' : null )]"><a href="#pane1" data-toggle="tab">1</a></li>
                            <li class="" v-bind:class="[(tab2_visible.val ? null : 'hidden'), (tab2_active.val ? 'active' : null )]"><a href="#pane2" data-toggle="tab">2</a></li>
                            <li class="" v-bind:class="[(tab3_visible.val ? null : 'hidden'), (tab3_active.val ? 'active' : null )]"><a href="#pane3" data-toggle="tab">3</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane" id="pane1" v-bind:class="[(tab1_visible.val ? null : 'hidden'), (tab1_active.val ? 'active' : null )]"></div>
                            <div class="tab-pane" id="pane2" v-bind:class="[(tab2_visible.val ? null : 'hidden'), (tab2_active.val ? 'active' : null )]"></div>
                            <div class="tab-pane" id="pane3" v-bind:class="[(tab3_visible.val ? null : 'hidden'), (tab3_active.val ? 'active' : null )]"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我需要模态在打开时始终处于初始状态。因此，即使计算的属性没有更改，我也总是想在打开上启用它。

我该怎么做？

Answer 1

使用模态事件将其连接到其功能。show.bs.modal将从模态本身发出之前，然后在显示的时刻重置模态主体中的内容。