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

使用modal events来加入其功能。 show.bs.modal将在显示之前从模态本身发出，因此您可以在此时重置模态体中的内容。

即使计算属性没有改变，Vue触发重新呈现html

1 个答案: