将 v-for 循环中的参数传递到引导模式并输出

Question

我正在尝试将 v-for 循环中的索引号 (loanRequest[6][index]) 传递到具有 texbox 的引导模式，然后发送一个包含索引号的对象 (obj)以及 texbox 的内容（原因）到我的后端 API。

这是我的 Vuejs 代码：

<tr v-for="(n,index) in loanRequest[1]">
				<td v-for="">{{loanRequest[0][index]}}</td>
				<td v-for="">{{loanRequest[7].staff_name}}</td>
				<td v-for="">{{loanRequest[1][index]}}</td>
				<td v-for="">{{loanRequest[2][index]}}</td>
				<td v-for="">{{loanRequest[3][index]}}</td>
				<td v-for="">{{loanRequest[4][index]}}</td>
				<td v-for="">{{loanRequest[5][index].created_at}}</td>
				<td><a  :href="'http://localhost:8080/loans/details/'+loanRequest[6][index]"><button class="btn btn-primary btn-sm">view details</button></a></td>
				<td><a ><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#approve" @click="approveUpdate(loanRequest[6][index])">Approve</button></a>
					<a ><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#reject" @click="clearbox(loanRequest[6][index])">Reject</button></a>
				</td>
				<br><br>
			</tr>
								
		</table>

		<!-- Modal reject -->
		<div class="modal fade" id="reject" role="dialog">
		    <div class="modal-dialog modal-sm">
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal">&times;</button>
		          <h4 class="modal-title">Loan Rejection</h4>
		        </div>
		        <div class="modal-body">
		          <p>Are you sure you want to reject this loan request?</p>
		          <div class="form-group">
		            <label>Reason: </label>
		            <input v-model="reason" class="form-control" placeholder="Enter your reason">
		          </div>
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-danger" data-dismiss="modal" v-show="reason" @click="clearbox">Reject</button>
		        </div>
		      </div>
		    </div>
		</div>

	</div>
</template>

<script type="text/javascript">
	export default {
		data () {
			return {
				loanRequest: '',
                reason: ''
			}
		},
      methods: {
      clearbox (index){
        var obj = {
          "id": index,
          "reason": this.reason
        };
        console.log(obj);
        this.reason = null;
      }
    }
	}
</script>

目前使用上面的代码，我得到了 2 个对象，第一个对象包含索引号，第二个对象包含文本框内容。 如何将它们合并在一起以获得一个包含索引号和模式文本框内容的对象（obj）？任何帮助将不胜感激！

Answer 1

将模态对话框移动到其他组件，然后将索引作为道具传递。