我正在检查第一个QInput上的@input事件。似乎给我带来麻烦的唯一QInput是那些类型为“数字”的QInput。我有一个函数，它会在每次字段为空时进行检查，但是只有当我在QInput外部按一下时才会触发。我敢肯定，我一切都正确，但是我不断出错，这些事件迟到了。我得到的错误如下：“无效的道具：道具“类型”的自定义验证程序检查失败。给我带来麻烦的组件大约是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
})
}
},