show particular data in pop up modal in vue.js

Question

this is regarding Vue.js question

i'm trying to open bootstrap model form inside the Vue template i use two vue template components,

this sub component call inside this competence and pass data from this to sub component
this component use for show particular (load one by one products) model data

so i need to show one by one products data on the model form (when product 1 show name 'Abc') like this

but i cant do this.. all implementation are done and working fine but cant show the particular data on the model form

show it only first loop value (i have 3 products all load in the table,but when click edit button first product show correctly,but click 2nd product show first product data)

but when i call console.log function and view when open the model show particular data in the console, but not showing its on the model form

why it that

i put my code segment in the below

example-component

  <tbody >
     <tr div v-for="invoices in invoice">
         <th class="invoice_name ">{{invoices.p_name}}</th>                       
         <td class="unit">
         <sub-com :pID=invoices.p_id :invoice=invoices :invoiceID=invoice_id></sub-com>
         </td>      
    </tr>
 </tbody>

sub-com

<template>
 <div>
  <div class="form-group">
    <a href="#" @click="refundMethod(invoice)">Refund</a>
  </div>
  <div class="col-md-6">
    <div class="modal fade" id="refundModel" tabindex="-1" role="dialog" aria-labelledby="addNewLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form>
            <div class="modal-body">
              <div class="form-group">
                <input v-model="form.name" type="text" name="name" placeholder="Name" class="form-control">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

this is sub.vue script segment

<script>

export default{

  data(){
    return{                  
    form: {     
      name:''                  
        }
    }
  },        

  props: {    
    pID: String,
    invoiceID:String,
    invoice:{},     
}
methods: {
  refundMethod(invoices){
    this.form.name = invoices.p_name;
    console.log(invoices.p_name);
    $('#refundModel').modal('show');
  }
}

ellisdod ellisdod · Accepted Answer · 2020-03-28T10:24:24

There are a couple of issues that might clear things up.

First you need to add a key to your template v-for loop:

<tr v-for="invoices in invoice" :key="invoices.p_id">

Second you are using jquery to trigger the modal which could work but you will have to generate unique ids for each div:

<div :id="'refundModel_'+pID">

A more Vue way to do this is to use the bootstrap data-show attribute and link it to a Boolean modal property in your data:

<div :data-show="modal" :id="'refundModel_'+pID">

export default {

 data(){
    return{ 
      modal : false,                 
      form: {     
        name:''                  
         }
      }
 },        
 props: {    
    pID: String,
    invoiceID: String,
    invoice: Object,     
 }
 methods: {
   refundMethod(invoices){
     this.form.name = invoices.p_name;
     console.log(invoices.p_name);
     this.toggleModal()
   }
   toggleModal () {
     this.modal = !this.modal
   }
 }
}

show particular data in pop up modal in vue.js

1 Answers