0

I am new to Vue2.js, I am trying to open modal box and show content of an array.

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

which is open modal box perfectly, but its not rendering vue variable values

Modal Box: 

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

Now this Modal Box when opening , its displaying like this : 

Seller @{{selected_sku_req.seller_name}}

Basically selected_sku_req.seller_name is not loading

Vue Function

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

Any help would be appreciated!

user7498776
  • 139
  • 1
  • 1
  • 5
  • It looks like you're using Bootstrap along with Vue. That's not going to work well, since Vue isn't aware of when Bootstrap modifies the DOM. – Roy J Feb 15 '18 at 15:31
  • how can I make Vue to know about Bootstrap? or somehow to render HTML again! – user7498776 Feb 16 '18 at 07:24

2 Answers2

0

You can't have Bootstrap and Vue both controlling the DOM without some kind of referee to keep them from stepping on each others' toes. See Make VueJS and jQuery play nice .

Probably your best option is to use Bootstrap-Vue which was created to solve this exact issue.

Roy J
  • 42,522
  • 10
  • 78
  • 102
0

This is a rather complicated approach. Why not make your modal a Vue-component that renders data dynamically, like

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

and then refer to it in your modal 

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

Example: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/10

Bene
  • 38
  • 2
  • 14