在 vue.js 的弹出模式中显示特定数据

Posted 2023-02-23

【中文标题】在 vue.js 的弹出模式中显示特定数据

【英文标题】：show particular data in pop up modal in vue.js

【发布时间】：2020-07-08 20:52:41

【问题描述】：

这是关于 Vue.js 的问题

我正在尝试在 Vue 模板中打开引导模型表单 我使用了两个 vue 模板组件，

这个子组件在这个权限内调用，并将数据从这个子组件传递给子组件

此组件用于显示特定（加载一个一个产品）模型数据

所以我需要像这样在模型表单上一一显示产品数据（当产品 1 显示名称“Abc”时）

但我不能这样做..所有实施都已完成并且工作正常 但无法在模型表单上显示特定数据

仅显示第一个循环值（我在表中加载了 3 个产品，但是当单击编辑按钮时第一个产品显示正确，但单击第二个产品显示第一个产品数据）

但是当我调用console.log函数并在打开模型时查看时在控制台中显示特定数据，而不是在模型表单上显示它

为什么会这样

我把我的代码段放在下面

示例组件

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

子网

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

这是 sub.vue 脚本段

<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');
  

【参考方案1】：

有几个问题可以解决。

首先你需要在你的模板v-for循环中添加一个键：

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

其次，您使用 jquery 来触发可以工作的模式，但您必须为每个 div 生成唯一的 id：

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

实现这一点的更多 Vue 方法是使用引导程序 data-show 属性并将其链接到数据中的布尔值 modal 属性：

<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