vue 用了vmodel 借阅人信息输入框输入信息无法更新 输入了没有作

例如借阅人姓名那些信息输入 无法更新

const value4 = ref<[Dayjs, Dayjs]>()

//日期选择组件-----------------------------------------------------------------------

//记录图书id

let bookId = 0

// 借阅人信息

const borrowerName = ref('')

const borrowerEmail = ref('')

const borrowerPhone = ref('')

const lendingInfo = ref('')

//借阅按钮回调

const lookBtn = (item) => {

  open.value = true

  value4.value = undefined

  bookId = item.id

}

//对话框确认按钮

const handleOk = async () => {

 

  console.log('borrowerName:', borrowerName.value);

console.log('borrowerEmail:', borrowerEmail.value);

console.log('borrowerPhone:', borrowerPhone.value);

  open.value = false

  if (!value4.value) {

    message.error('借阅失败，时间不能为空', 1)

    return

  }

  if (!borrowerName.value ) {

    message.error('借阅失败，借阅人信息不能为空', 1)

    return

  }

  const dataObj = {

    startTime: dayjs(value4.value?.[0]).format('YYYY-MM-DD HH:mm:ss'),

    endTime: dayjs(value4.value?.[1]).format('YYYY-MM-DD HH:mm:ss'),

    userid: Number(localStorage.getItem('book-user-id')),

    bookid: bookId,

    borrowerName: borrowerName.value,

    borrowerEmail: borrowerEmail.value,

    borrowerPhone: borrowerPhone.value,

    lendingInfo: lendingInfo.value

  }

 

  console.log(dataObj); // 查看传递给后端的数据对象

  let res: any = await addBookLending(dataObj)

  if (res.code === 200) {

    message.success(res.msg, 2)

  } else {

    message.error(res.msg, 1)

  }

}

//控制抽屉

const open1 = ref(false)

const itemInfo = ref<any>()

//查看按钮回调

const viewBtn = (item) => {

  open1.value = true

  itemInfo.value = item

}

</script>

<script lang="ts">

export default {

  name: 'bookLending'

}

</script>

<template>

  <div class="bookLending" ref="boxEl">

    <template v-for="(item, index) in bookData">

      <div class="item" v-if="defer(index + 1)">

        <img :src="item.picture" alt="" />

        <span>{{ item.bookName }}</span>

        <div class="btn">

          <a-button type="primary" @click="lookBtn(item)">借阅</a-button>

          <a-button type="primary" @click="viewBtn(item)">查看</a-button>

        </div>

      </div>

    </template>

   

   

    <a-modal v-model:open="open" title="图书借阅" @ok="handleOk">

      <div class="bookRestore">

        <a-space direction="vertical">

          <a-input v-model="borrowerName" placeholder="借阅人姓名" />

          <a-input v-model="borrowerEmail" placeholder="借阅人邮箱" />

          <a-input v-model="borrowerPhone" placeholder="借阅人电话" />

          <a-textarea v-model="lendingInfo" placeholder="借阅信息" />

          <a-range-picker

            v-model:value="value4"

            style="width: 400px"

            :disabled-date="disabledDate"

            :disabled-time="disabledRangeTime"

            :show-time="{

              hideDisabledOptions: true,

              defaultValue: [

                dayjs('00:00:00', 'HH:mm:ss'),

                dayjs('11:59:59', 'HH:mm:ss')

              ]

            }"

            format="YYYY-MM-DD HH:mm:ss"

          />

        </a-space>

      </div>