Vue.js @输入事件触发延迟，并出现错误："；无效的道具：道具的自定义验证器检查失败；键入“"；”&引用；

我正在检查第一次输入时的@input事件。似乎唯一给我带来麻烦的是那些有“数字”类型的。我有一个函数，每次字段为空时都会检查，但它只有在我按下键盘外的键时才会触发。我很确定我所有的事情都是正确的，但我不断地出错，而且事件发生得很晚。我得到的错误如下：“无效的道具：自定义验证器检查失败的道具”类型“。给我带来麻烦的组件是大约900行代码，所以我将只附加一些代码。 这是全部错误：

[Vue warn]: Invalid prop: custom validator check failed for prop "type".

found in

---> <QInput>
       <QModal>
         <QDialog>
           <Anonymous>
             <QPageContainer>
               <QLayout>
                 <MyLayout> at src/layouts/MyLayout.vue
                   <App> at src/App.vue
                     <Root>
warn    @   vue.runtime.esm.js?2b0e:587
assertProp  @   vue.runtime.esm.js?2b0e:1639
validateProp    @   vue.runtime.esm.js?2b0e:1556
updateChildComponent    @   vue.runtime.esm.js?2b0e:2845
prepatch    @   vue.runtime.esm.js?2b0e:4140
patchVnode  @   vue.runtime.esm.js?2b0e:5921
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
updateChildren  @   vue.runtime.esm.js?2b0e:5818
patchVnode  @   vue.runtime.esm.js?2b0e:5932
patch   @   vue.runtime.esm.js?2b0e:6092
Vue._update @   vue.runtime.esm.js?2b0e:2666
updateComponent @   vue.runtime.esm.js?2b0e:2784
get @   vue.runtime.esm.js?2b0e:3138
run @   vue.runtime.esm.js?2b0e:3215
flushSchedulerQueue @   vue.runtime.esm.js?2b0e:2977
(anonymous) @   vue.runtime.esm.js?2b0e:1833
flushCallbacks  @   vue.runtime.esm.js?2b0e:1754
Promise.then (async)        
microTimerFunc  @   vue.runtime.esm.js?2b0e:1802
nextTick    @   vue.runtime.esm.js?2b0e:1846
queueWatcher    @   vue.runtime.esm.js?2b0e:3064
update  @   vue.runtime.esm.js?2b0e:3205
notify  @   vue.runtime.esm.js?2b0e:693
reactiveSetter  @   vue.runtime.esm.js?2b0e:1010
proxySetter @   vue.runtime.esm.js?2b0e:3296
__onBlur    @   input.js?5e06:45
(anonymous) @   input.js?5e06:40
setTimeout (async)      
__onInputBlur   @   input.js?5e06:39
invoker @   vue.runtime.esm.js?2b0e:2023
fn._withTask.fn._withTask   @   vue.runtime.esm.js?2b0e:1822

Component code below: 

<template>
  <div>
    <div id="mainjob">
      <div>
        <div class="secondarycolor">
          <h5 id="jobheader"> Job Center </h5>
        </div>
        <div>
          <p class="secondarycolor">Filter By:</p>
        </div>
        <div class="row justify-center">
          <q-tabs color="secondary" align="justify" inverted v-model="selectedtab">
            <q-tab default name="searchbyid" label="Search by ID" slot="title"/>
            <q-tab name="customfilter" label="Custom Filters" slot="title"/>
            <q-tab name="notpickedup" label="Machines Not Picked Up" slot="title" @select="notpickedup()"/>
            <q-tab-pane name="searchbyid">
              <div class="row justify-center" id="repairid">
                <q-input type="number" placeholder="Repair ID" @input="RepairId()" class="inputspace" v-model="repairid" color="secondary"/>
              </div>
            </q-tab-pane>
            <q-tab-pane name="customfilter">
              <div id="filterbox">
                <div id="selectbox">
                  <div  id="selectboxsub">
                    <div class="row">
                      <div>
                        <q-select
                          class="inputspace"
                          multiple
                          color="secondary"
                          filter
                          placeholder="Select Filters"
                          v-model="filtersselected"
                          :options="filteroptions"
                          @input="filterchanged()"
                          :display-value="`${filtersselected.length} filters selected`"
                        />
                      </div>
                      <div class="row">
                        <q-btn icon="clear" color="secondary" @click="clearfilters()" class="inputspace">
                          <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                            Clear Filters
                          </q-tooltip>
                        </q-btn>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row justify-center" id="filterinput" v-if="filtersselected.length>0">
                  <div>
                    <q-input @input="searchbyfilter()" placeholder="Customer First Name" color="secondary" v-model="fname" class="inputspace" id="fname" v-if="containsvar('cusfname')"/>
                    <q-input @input="searchbyfilter()" placeholder="Customer Last Name" color="secondary" v-model="lname" class="inputspace" id="lname" v-if="containsvar('cuslname')"/>
                  </div>
                  <div>
                    <q-select
                      class="inputspace"
                      id="brand"
                      color="secondary"
                      filter
                      placeholder="Machine Brand"
                      v-model="brand"
                      :options="Brands"
                      @input="brandchanged(), searchbyfilter()"
                      v-if="containsvar('brand')"
                    />
                    <q-select
                      class="inputspace"
                      id="color"
                      color="secondary"
                      filter
                      placeholder="Machine Color"
                      v-model="color"
                      :options="Colors"
                      @input="colorchanged(), searchbyfilter()"
                      v-if="containsvar('color')"
                    />
                    <q-select
                      class="inputspace"
                      id="type"
                      color="secondary"
                      filter
                      placeholder="Machine Type"
                      v-model="type"
                      :options="Types"
                      @input="typechanged(), searchbyfilter()"
                       v-if="containsvar('type')"
                    />
                    <q-input @input="searchbyfilter()" placeholder="Model" color="secondary" v-model="model" class="inputspace" id="model"  v-if="containsvar('model')"/>
                  </div>
                  <div class="column">
                    <q-checkbox @input="searchbyfilter()" label="Warranty" color="secondary" v-model="warranty" class="inputspace" id="warranty"  v-if="containsvar('warranty')"/>
                    <q-checkbox @input="searchbyfilter()" label="Purchased Here" color="secondary" v-model="purchased" class="inputspace" id="purchased"  v-if="containsvar('purchased')"/>
                    <q-checkbox @input="searchbyfilter()" label="Rush Service" color="secondary" v-model="rushservice" class="inputspace" id="rushservice"  v-if="containsvar('rushservice')"/>
                    <q-checkbox @input="searchbyfilter()" label="Completed" color="secondary" v-model="completed" class="inputspace" id="completed"  v-if="containsvar('completed')"/>
                  </div>
                </div>
              </div>
            </q-tab-pane>
            <q-tab-pane name="notpickedup">
            </q-tab-pane>
          </q-tabs>
        </div>
        <div>
          <center v-if="filteredbyid.length==0&&selectedtab=='searchbyid'">
            <h6 class="secondarycolor">No Results</h6>
          </center>
          <center v-if="customfilters.length==0&&selectedtab=='customfilter'">
            <h6 class="secondarycolor">No Results</h6>
          </center>
          <div class="row justify-center">
            <div class="row justify-center">
              <q-card color="secondary" dark class="q-ma-sm" v-for="(repair,index) in jobs" :key="index">
                <q-card-title>
                  <i><span class="title"># </span></i>
                  <span class="title">{{ repair.RepairID }}</span>
                </q-card-title>
                <q-card-main>
                  <div class="row">
                    <div class="titles">
                      <span ><b>Name:</b></span><br>
                      <span><b>Phone Number:</b></span> <br>
                      <span><b>Brand:</b></span> <br>
                      <span><b>Type:</b></span> <br>
                      <span><b>Color:</b></span> <br>
                      <span><b>Model:</b></span> <br>
                      <span><b>Problem:</b></span> <br>
                      <span><b>Phone Number:</b></span> <br>
                      <span><b>Warranty:</b></span> <br>
                      <span><b>Purchased Here: </b></span> <br>
                      <span><b>Rush Service: </b></span> <br>
                      <span><b>Date Received: </b></span> <br>
                      <span><b>Status: </b></span> <br>
                      <span v-if="repair.Hours!=null"><b>Hours: </b></span> <br>
                      <span v-if="repair.Hours!=null"><b>Pick Up Date: </b></span> <br>
                    </div>
                    <div class="description">
                      <span>{{ repair.FirstName + " " + repair.LastName }}</span> <br>
                      <span>{{ repair.PhoneNumber }}</span> <br>
                      <span>{{ repair.Brand }}</span> <br>
                      <span>{{ repair.Type }}</span> <br>
                      <span>{{ repair.Color }}</span> <br>
                      <span>{{ repair.Model }}</span> <br>
                      <span>{{ repair.Problem }}</span> <br>
                      <span>{{ repair.PhoneNumber }}</span> <br>
                      <q-icon name="check_box" v-if="repair.Warranty==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.Warranty==0" /> <br>
                      <q-icon name="check_box" v-if="repair.Purchased==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.Purchased==0" /> <br>
                      <q-icon name="check_box" v-if="repair.RushService==1" />
                      <q-icon name="check_box_outline_blank" v-if="repair.RushService==0" /> <br>
                      <span> {{ getdatestring(repair.DateReceived) }} </span> <br>
                      <span v-if="repair.Hours!=null"> Completed </span>
                      <span v-if="repair.Hours==null"> In Progress </span> <br> 
                      <span v-if="repair.Hours!=null"> {{repair.Hours}} </span> <br>
                      <span v-if="repair.Hours!=null&&repair.DatePickedUp!=null"> {{getdatestring(repair.DatePickedUp)}} </span>
                      <span v-if="repair.Hours!=null&&repair.DatePickedUp==null"> Pickup Pending </span> <br>
                    </div>
                  </div>
                </q-card-main>
                <q-card-separator />
                <q-card-actions>
                  <q-btn icon="playlist_add" class="inputspace" v-if="repair.Hours==null" @click="addpart(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Add Part
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="list_alt" color="secondary" class="inputspace" @click="getpartslist(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      View All Parts
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="done" color="secondary" class="inputspace" v-if="repair.Hours==null" @click="completejob(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Complete Job
                    </q-tooltip>
                  </q-btn>
                  <q-btn icon="local_shipping" color="secondary" class="inputspace" v-if="repair.Hours!=null&&repair.DatePickedUp==null" @click="pickupmachinery(repair.RepairID)">
                    <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]" color="secondary" @click="showing = false">
                      Pick Up Machine
                    </q-tooltip>
                  </q-btn>
                </q-card-actions>
              </q-card>
            </div>
          </div>
        </div>
      </div>
      <q-dialog
        v-model="addpartdialog"
        prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Add Parts </span>
          </span>
          <template slot="message"> 
            <div class="row justify-center addpartborder">
              <div class="column addpartsideborder">
                <center><p class="secondarycolor">Part Number: </p></center>
                <q-input type="text" placeholder="Part Number" v-model="partnumber" color="secondary" class="inputspace"/>
              </div>
              <div class="column addpartsideborder">
                <center><p class="secondarycolor"> Quantity: </p></center>
                <q-input type="number" placeholder="Quantity" v-model="numquantity" color="secondary" class="inputspace"/>
              </div>
              <div class="column">
                <center><p class="secondarycolor"> Description: </p></center>
                <q-input type="text" placeholder="Part Description" v-model="partdescription" color="secondary" class="inputspace"/>
              </div>
            </div><center>
            <div>
              <q-btn label="Add Part" color="secondary" @click="addparts()" :disable="disableaddparts"/>
            </div></center>
          </template>
          <span slot="buttons" slot-scope="props">
            <span>
              <q-btn label="Done" color="secondary" @click="done()" class="row justify-center"/>
            </span>
          </span>
        </q-dialog>
        <q-dialog
          v-model="addpartsuccess"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Part Addition Request </span>
          <span slot="message"> Part Added Successfully </span>
        </q-dialog>
        <q-dialog
          v-model="pickupsuccess"
          color="secondary"
        >
          <span slot="title" class="secondarycolor"> Pickup Request </span>
          <span slot="message"> Date Added Successfully </span>
        </q-dialog>
        <q-dialog
              v-model="partslistdialog"
              prevent-close
        >
          <span slot="title"> 
            <span class="secondarycolor row justify-center">Parts List </span>
          </span>
          <template slot="message" class="row justify-center"> 
            <span v-if="partslist.length==0"> No parts entered for this machine </span>
            <table class="secondarycolor" v-else>
              <tr class="tableborderbottom">
                <th> Part Name </th>
                <th> Part Number </th>
                <th class="no-border"> Quantity </th>
              </tr>
              <tr v-for="(part, index) in partslist" :key="index">
                <td><center> {{ part.PartName }} </center></td>
                <td><center> {{ part.PartNumber }} </center></td>
                <td class="no-border"><center> {{ part.Quantity }} </center></td>
              </tr>
            </table>
          </template>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Go Back" color="secondary" @click="partslistgoback()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="terminatejob"
          color="secondary"
          prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Complete Job </span>
          </span>
          <span slot="message">
            <div class="row justify-center">
              <div class="column">
                <span class="secondarycolor justify-center row"> Hours Worked: </span>
                <q-input type="number" placeholder="Hours" color="secondary" v-model="hours" class="inputspace"/>
              </div>
            </div>
          </span>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" class="inputspace" @click="finishjob()" :disable="disablefinishbtn"/>
            <q-btn label="Cancel" color="secondary" class="inputspace" @click="hoursgoback()"/>
          </span>
        </q-dialog>
        <q-dialog
          v-model="pickup"
          color="secondary"
          prevent-close
        >
          <span slot="title">
            <span class="secondarycolor row justify-center"> Pick Up Machine </span>
          </span>
          <span slot="message">
            <div class="row justify-center">
              <div class="column">
                <span class="secondarycolor justify-center row"> Date Picked Up: </span>
                <q-input type="Date" placeholder="Pick Up Date" color="secondary" v-model="pickupdate" class="inputspace"/>
              </div>
            </div>
          </span>
          <span slot="buttons" slot-scope="props">
            <q-btn label="Submit" color="secondary" class="inputspace" @click="pickupmachine()" :disable="disablepickupbtn"/>
            <q-btn label="Cancel" color="secondary" class="inputspace" @click="pickupgoback()"/>
          </span>
        </q-dialog>
    </div>
  </div>
</template>

data () {
    return {
      selectedtab: 'searchbyid',
      repairid: null,
      filtersselected: [],
      model: "",
      fname: "",
      lname: "",
      brand: null,
      color: null,
      type: null,
      warranty: false,
      purchased: false,
      rushservice: false,
      completed: false,
      servercolors: [],
      serverbrands: [],
      servertypes: [],
      filteroptions: [
        {
          label: "Select All",
          value: "selectall"
        },
        {
          label:"Customer First Name",
          value:"cusfname"
        },
        {
          label:"Customer Last Name",
          value:"cuslname"
        },
        {
          label:"Brand of Machine",
          value:"brand"
        },
        {
          label:"Type of Machine",
          value:"type"
        },
        {
          label:"Model of Machine",
          value:"model"
        },
        {
          label:"Color",
          value:"color"
        },
        {
          label:"Warranty",
          value:"warranty"
        },
        {
          label:"Purchased Here",
          value:"purchased"
        },
        {
          label:"Rush Service",
          value:"rushservice"
        },
        {
          label: "Completed Jobs",
          value: "completed"
        }
      ],
      filteredbyid: [],
      customfilters: [],
      machinesnotpickedup: [],
      partnumber: "",
      numquantity: 0,
      partdescription: "",
      addpartdialog: false,
      addpartrepairidchosen: null,
      addpartsuccess: false,
      partslistdialog: false,
      partslistrepairidchosen: null,
      partslist: [],
      terminatejob: false,
      hours: 0,
      finishjobrepairid: null,
      finishjobsuccess: false,
      pickupdate: null,
      pickup: false,
      pickuprepairid: null,
      pickupsuccess: false
    }
  },
RepairId: function () {
      console.log(this.repairid)
      if(this.repairid==null)
      {
        this.filteredbyid=[]
      }
      else
      {
        this.$Socket.emit('findrepairbyid', {
          RepairID: this.repairid
        }, (data) => {
          this.filteredbyid=data
        })
      }
    },

[Vue warn]：无效的道具：针对道具“类型”的自定义验证程序检查失败。
发现于
---> 
位于src/layouts/MyLayout.vue
在src/App.vue
warn@vue.runtime.esm.js？2b0e:587
assertProp@vue.runtime.esm.js？2b0e:1639
validateProp@vue.runtime.esm.js？2b0e:1556
updateChildComponent@vue.runtime.esm.js？2b0e:2845
prepatch@vue.runtime.esm.js？2b0e:4140
patchVnode@vue.runtime.esm.js？2b0e:5921
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
updateChildren@vue.runtime.esm.js？2b0e:5818
patchVnode@vue.runtime.esm.js？2b0e:5932
补丁@vue.runtime.esm.js？2b0e:6092
Vue._update@Vue.runtime.esm.js？2b0e:2666
updateComponent@vue.runtime.esm.js？2b0e:2784
获取@vue.runtime.esm.js？2b0e:3138
运行@vue.runtime.esm.js？2b0e:3215
flushSchedulerQueue@vue.runtime.esm.js？2b0e:2977
（匿名）@vue.runtime.esm.js？2b0e:1833
flushCallbacks@vue.runtime.esm.js？2b0e:1754
Promise.then（异步）
microTimerFunc@vue.runtime.esm.js？2b0e:1802
nextTick@vue.runtime.esm.js？2b0e:1846
queueWatcher@vue.runtime.esm.js？2b0e:3064
更新@vue.runtime.esm.js？2b0e:3205
通知@vue.runtime.esm.js？2b0e:693
reactiveSetter@vue.runtime.esm.js？2b0e:1010
proxySetter@vue.runtime.esm.js？2b0e:3296
__onBlur@input.js？5e06:45
（匿名）@input.js？5e06:40
设置超时（异步）
__onInputBlur@input.js？5e06:39
invoker@vue.runtime.esm.js？2b0e:2023
fn._withTask.fn._withTask@vue.runtime.esm.js？2b0e:1822
组件代码如下：
就业中心
过滤方式：
清除过滤器
没有结果
没有结果
# 
{{repair.RepairID}
名称：

电话号码：

品牌：

类型：

颜色：

型号：

问题：

电话号码：

保修：

在此处购买：

紧急服务：

收到日期：

状态：

小时数：

提货日期：

{repair.FirstName+“”+repair.LastName}}

{{repair.PhoneNumber}}

{{repair.Brand}}

{{repair.Type}}

{{repair.Color}}

{{repair.Model}}

{{repair.Problem}}

{{repair.PhoneNumber}}







{{getdatestring（repair.DateReceived）}}

完整的
正在进行中

{{repair.Hours}}

{{getdatestring（repair.DatePickedUp）}
拾取挂起

添加部分
查看所有部件