我一直在尝试添加一个新的领域内的模态弹出，但它似乎不工作。我可以设法显示输入，但我不能得到它的值发送后。
在未收到付款的订单组件中

<td class="width-150">
 <payment-not-received-order-actions
    :row="row"
    @markAsPaidAction="confirmMarkAsPaid(row)"
 />
</td>
confirmMarkAsPaid (row) {
  this.$modal.show('dialog', {
    title: this.$t('payment_not_received_orders.modal.title'),
    component: PaymentNotReceivedInput,
    buttons: [
      {
        title: this.$t('payment_not_received_orders.modal.ok_button'),
        handler: () => {
            const requestBody = {
              note: this.$refs.paymentNotReceivedInput.note || ''
            }
            this.markAsPaid(row.id, requestBody)
            this.$modal.hide('dialog')
        }
      },
      {
        title: this.$t('payment_not_received_orders.modal.cancel_button')
      }
    ]
  })
},

在未收到付款订单操作组件中：

<div class="text-right">
 <button
   type="button"
   class="btn btn-default btn-md margin-3"
   @click="$emit('markAsPaidAction')"
  >
   <i class="fa fa-eur" aria-hidden="true" />
    {{ $t('orders.orders_action.mark_as_paid') }}
 </button>
</div>

在payment-not-received-input中（我添加了该字段）：

<template>
  <div>
    <label for="note">{{ $t('payment_not_received_input.modal.note_label') }}</label>
    <textarea id="note" v-model="note" ref="note"></textarea>
  </div>
 </template>
 <script>
 export default {
 name: 'payment-not-received-input',
 data () {
  return {
  note: ''
  }
 },
 mounted() {
   this.note = '';
  }
}

这条线似乎根本不起作用：

this.$refs.paymentNotReceivedInput

那么，如何在vuejs的模式弹出窗口中添加输入字段呢？