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

【问题标题】：vue.js Bootstrap Modal Data Bind Failsvue.js Bootstrap 模态数据绑定失败
【发布时间】：2016-03-11 06:02:37
【问题描述】：

我在 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

【问题讨论】：

是您的 Vue 应用绑定到的元素中的模态吗？
无论是 Jeff 提出的问题，还是我猜测 Bootstrap 以某种方式复制或移动模态正文元素，从而移除了 Vue 绑定。
我已经将 vue 与外部资源一起使用，包括引导程序，我不会有任何这样的问题。如果您仍然认为这可能是引导 js 库，请尝试使用 vue-strap。无论如何，我在那里看到的是，您的应用程序中不存在 Vue，因为忽略了绑定、v-if 以及与 Vue 相关的所有内容
@Jeff 就是这样！我真的是想多了。谢谢！
@ractoon 没问题，很高兴它成功了！我提出了一个答案，以便将来的观众可能会从这个问题中得到帮助。

标签： vue.js

【解决方案1】：

确保你的模态代码在 Vue 绑定的元素内

【讨论】：