Я проверяю событие @input на первом QInput.Кажется, что единственные QInputs, которые доставляют мне неприятности, это те, которые имеют тип как «число».У меня есть функция, которая проверяет каждый раз, когда поле пусто, но срабатывает только после того, как я нажму за пределами 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
})
}
},