VUE模态不渲染HTML

Question

我是vue2.js的新手，我正在尝试打开模态框并显示数组的内容。

<tr v-for="(sku_req,itemObjKey) in sku_requests" :key="sku_req.id">
  <td><i class="ft-eye font-medium-3 mr-2" data-toggle="modal" data-target="#showskudetails" v-on:click="show_sku_object(itemObjKey)"></i></td>
</tr>

完美开放的模态盒，但它不是渲染Vue变量值

模态框：

<div class="modal fade text-left" id="showskudetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel21" aria-hidden="true">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel21">SKU Gen Request</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                  </div>
                  <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">Seller</div>
                        <div class="col-md-8">@{{selected_sku_req.seller_name}}</div>
                    </div>

现在打开时这个模态框，它以这样的显示：

Seller @{{selected_sku_req.seller_name}}

基本上Selected_sku_req.seller_name不加载

vue函数

show_sku_object: function(itemObjKey){
        var self = this;
        self.selected_sku_req = self.sku_requests[itemObjKey];
    }

任何帮助将不胜感激！

Answer 1

您不能没有bootstrap，并且在没有某种裁判的情况下可以控制DOM，以防止他们踩到彼此的脚趾。请参阅Make Vuejs和JQuery播放不错。

可能您最好的选择是使用Bootstrap-vue来解决此确切问题。

Answer 2

这是一种相当复杂的方法。为什么不使模态成为动态呈现数据的VUE组件，例如

<tr v-for="(sku_req,itemObjKey) in sku_requests" :key="sku_req.id">
 <td :data="sku_object.itemObjKey"><i v-on:click="openModal()"></i></td>
</tr>

，然后在您的模态

中参考它

<div class="col-md-8" v-html="data"></div>

示例：https://laracasts.com/series/learn-vue-2-step-by-step/episodes/10