Question

我试图将一个v-for循环中的索引号（loanRequest [6] [index]）传递给一个带有texbox的bootstrap模式，然后发送一个包含索引号的对象（obj）和texbox的内容（原因）到我的后端API。

这是我的Vuejs代码：

＆＃13;

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

＆＃13;

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

Answer 1

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

将v-for循环中的参数传递给bootstrap模式并输出

1 个答案: