Question

我在Bootstrap模态元素中绑定数据时遇到了一些问题。如果我移动模态容器外的modal-body类中的所有内容它可以正常工作，但是，vue.js不会在模态中拾取绑定。

不确定这是否与模态样式（display: none;打开前）或冲突脚本有关。模态代码如下：

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">

        <div v-if="loading" class="text-center">

          <img src="loading.gif" alt="Loading">

        </div>
        <div v-else>

          <div v-if="plugins.length > 0" class="list-group">
            <a href="#" class="list-group-item" v-for="(index, plugin) in wpplugins">
              <h5 class="list-group-item-heading"><strong>{{ plugin.name }}</strong> by {{ plugin.author }}</h5>
              <p class="list-group-item-text"><small>{{ plugin.desc }}</small></p>
            </a>
          </div>

        </div>

      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

这最终只输出图像和语法：

How it appears in the modal when open

Answer 1

确保您的模态代码位于Vue绑定的元素

内

vue.js Bootstrap模态数据绑定失败

1 个答案: