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

Question

我在 Bootstrap 模态元素中绑定数据时遇到一些问题。如果我将 modal-body class 中的所有内容移到模态容器之外，它工作正常，但是，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 模态数据绑定失败

vue.js Bootstrap Modal Data Bind Fails

vue.js