收到此错误：无法读取未定义的属性“0”
Posted
技术标签:
【中文标题】收到此错误：无法读取未定义的属性“0”【英文标题】：Get this error: Cannot read property '0' of undefined 【发布时间】：2019-04-16 22:28:18 【问题描述】：所以我能够通过重组整个 javascript 代码来解决异步调用的问题。它现在可以工作，但是每当我编辑修复并且服务器告诉客户端再次询问修复信息时我都会收到错误。错误消息是：“未捕获的类型错误：无法读取未定义的属性 '0'”。我会继续附上尽可能多的代码。
<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" @select="findrepair()"/>
<q-tab name="customfilter" label="Custom Filters" slot="title" @select="findrepair()"/>
<q-tab name="notpickedup" label="Machines Not Picked Up" slot="title" @select="findrepair()"/>
<q-tab-pane name="searchbyid">
<div class="row justify-center" id="repairidbox">
<q-input type="text" placeholder="Repair ID" @input="findrepair()" 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="findrepair()" type="text" placeholder="Customer First Name" color="secondary" v-model="fname" class="inputspace" id="fname" v-if="containsvar('cusfname')"/>
<q-input @input="findrepair()" type="text" 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(), findrepair()"
v-if="containsvar('brand')"
/>
<q-select
class="inputspace"
id="color"
color="secondary"
filter
placeholder="Machine Color"
v-model="color"
:options="Colors"
@input="colorchanged(), findrepair()"
v-if="containsvar('color')"
/>
<q-select
class="inputspace"
id="type"
color="secondary"
filter
placeholder="Machine Type"
v-model="type"
:options="Types"
@input="typechanged(), findrepair()"
v-if="containsvar('type')"
/>
<q-input @input="findrepair()" type="text" placeholder="Model" color="secondary" v-model="model" class="inputspace" id="model" v-if="containsvar('model')"/>
</div>
<div class="column">
<q-checkbox @input="findrepair()" label="Warranty" color="secondary" v-model="warranty" class="inputspace" id="warranty" v-if="containsvar('warranty')"/>
<q-checkbox @input="findrepair()" label="Purchased Here" color="secondary" v-model="purchased" class="inputspace" id="purchased" v-if="containsvar('purchased')"/>
<q-checkbox @input="findrepair()" label="Rush Service" color="secondary" v-model="rushservice" class="inputspace" id="rushservice" v-if="containsvar('rushservice')"/>
<q-checkbox @input="findrepair()" 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="jobarray.length==0">
<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 jobarray" :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>Received By: </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> repair.Name </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="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="text" placeholder="Hours" color="secondary" v-model="hours" class="inputspace"/>
<span v-if="isNaN(hours)" class="error"> Cannot contain letters </span>
</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-datetime 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>
<script>
import mapState from 'vuex'
var async = require('async')
export default
// name: 'ComponentName',
created()
this.$Socket.emit('getinfo', (data) =>
this.servercolors=data.colors
this.serverbrands=data.brands
this.servertypes=data.types
)
this.$Socket.on('updatecolor', (colors) =>
this.servercolors=colors
)
this.$Socket.on('updatebrand', (brands) =>
this.serverbrands=brands
)
this.$Socket.on('updatetype', (types) =>
this.servertypes=types
)
this.$Socket.on('repairsupdated', () =>
this.findrepair()
)
,
mounted()
this.$nextTick (() =>
)
,
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"
],
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,
jobarray: []
,
methods:
pickupmachinery: function (id)
this.pickup=true
this.pickuprepairid=id
,
pickupmachine: function ()
this.$Socket.emit('pickupmachine',
RepairID: this.pickuprepairid,
DatePickedUp: this.pickupdate
, (authenticated) =>
if(authenticated==true)
this.pickupdate=""
this.pickup=false
this.pickupsuccess=true
setTimeout( () => this.pickupsuccess=false, 1000)
)
,
pickupgoback: function ()
this.pickup=false
this.pickupdate=""
,
completejob: function (id)
this.terminatejob=true
this.finishjobrepairid=id
,
finishjob: function ()
this.$Socket.emit('finishjob',
RepairID: this.finishjobrepairid,
Hours: this.hours
, (authenticated) =>
if(authenticated==true)
this.terminatejob=false
this.finishjobsuccess=true
this.hours='0'
setTimeout( () => this.finishjobsuccess=false, 1000)
)
,
hoursgoback: function ()
this.terminatejob=false
this.hours='0'
,
partslistgoback: function ()
this.partslistdialog=false
,
getpartslist: function (id)
this.partslistdialog=true
this.partslistrepairidchosen=id
this.$Socket.emit('getpartslist',
RepairID: this.partslistrepairidchosen
, (data) =>
this.partslist=data
)
,
addparts: function ()
this.$Socket.emit('addpart',
RepairID: this.addpartrepairidchosen,
PartNumber: this.partnumber,
PartName: this.partdescription,
Quantity: this.numquantity
, (authenticated) =>
if(authenticated==true)
this.partdescription=""
this.numquantity=0
this.partnumber=""
this.addpartsuccess=true
setTimeout( () => this.addpartsuccess=false, 1000)
)
,
done: function ()
this.partnumber=""
this.numquantity=0
this.addpartdialog=false
,
addpart: function (id)
this.addpartdialog=true
this.addpartrepairidchosen=id
,
notpickedup: function ()
,
converttobool: function (num)
if(num==1)
return true
else
return false
,
brandchanged: function ()
if(this.brand=="none")
this.brand=null
,
colorchanged: function ()
if(this.color=="none")
this.color=null
,
typechanged: function ()
if(this.type=="none")
this.type=null
,
clearfilters: function ()
this.filtersselected=[]
this.customfilters=[]
this.clearforms()
this.jobarray=[]
,
filterchanged: function ()
if(this.containsvar("selectall"))
this.filtersselected=[]
this.filtersselected.push("completed", "rushservice", "purchased", "warranty", "type", "color", "brand", "cusfname", "cuslname", "model")
this.findrepair()
if(this.containsvar("cusfname")==false)
this.fname=""
if(this.containsvar("cuslname")==false)
this.lname=""
if(this.containsvar("model")==false)
this.model=""
if(this.containsvar("warranty")==false)
this.warranty=false
if(this.containsvar("type")==false)
this.type=null
if(this.containsvar("completed")==false)
this.completed=false
if(this.containsvar("rushservice")==false)
this.rushservice=false
if(this.containsvar("purchased")==false)
this.purchased=false
if(this.containsvar("brand")==false)
this.brand=null
if(this.containsvar("color")==false)
this.color=null
,
containsvar: function (variable)
for(var x=0; x<this.filtersselected.length; x++)
if(this.filtersselected[x]==variable)
return true
return false
,
clearforms: function ()
this.fname= ""
this.lname= ""
this.brand= ""
this.color= ""
this.type= ""
this.model=""
this.warranty= false
this.purchased= false
this.rushservice= false
this.completed= false
,
getdatestring: function (date)
var fulldate=date.slice(8, 10) + "/" + date.slice(5,7) + "/" + date.slice(0,4)
return fulldate
,
findrepair: function ()
var vm=this
this.jobarray=[]
if(this.selectedtab=="notpickedup")
vm.$Socket.emit('machinesnotpickedup', (data) =>
this.findsalesreps(data)
)
else if(this.selectedtab=="customfilter")
var array=[]
if(vm.containsvar('cusfname'))
if(vm.fname!=''&&vm.fname!=null)
array.push(
name: "FirstName",
type: "text",
table: "",
value: vm.fname
)
if(vm.containsvar('cuslname'))
if(vm.lname!=''&&vm.lname!=null)
array.push(
name: "LastName",
type: "text",
table: "",
value: vm.lname
)
if(vm.containsvar('brand'))
if(vm.brand!=''&&vm.brand!=null)
array.push(
name: "BrandID",
type: "number",
table: "brands",
value: vm.brand
)
if(vm.containsvar('color'))
if(vm.color!=''&&vm.color!=null)
array.push(
name: "ColorID",
type: "number",
table: "colors",
value: vm.color
)
if(vm.containsvar('type'))
if(vm.type!=''&&vm.type!=null)
array.push(
name: "TypeID",
type: "number",
table: "types",
value: vm.type
)
if(vm.containsvar('model'))
if(vm.model!=''&&vm.model!=null)
array.push(
name: "Model",
type: "text",
table: "",
value: vm.model
)
var integer=0
if(vm.containsvar('warranty'))
if(vm.warranty!=null&&vm.warranty!=null)
if(vm.warranty==true)
integer=1
else if(vm.warranty==false)
integer=0
array.push(
name: "Warranty",
type: "number",
table: "",
value: integer
)
if(vm.containsvar('purchased'))
if(vm.purchased==true&&vm.purchased!=null)
integer=1
else
integer=0
array.push(
name: "Purchased",
type: "number",
table: "",
value: integer
)
if(vm.containsvar('rushservice'))
if(vm.rushservice==true&&vm.rushservice!=null)
integer=1
else
integer=0
array.push(
name: "RushService",
table: "",
type: "number",
table: "",
value: integer
)
if(vm.containsvar('completed'))
var bool=false
if(vm.completed==true)
bool=true
else
bool=false
array.push(
name: "Hours",
type: "bool",
table: "",
value: bool
)
vm.$Socket.emit('findrepairbyfilters',
data: array
, (data) =>
this.findsalesreps(data)
)
else
if(this.repairid==null||this.repairid==""||isNaN(this.repairid))
this.jobarray=[]
else
vm.$Socket.emit('findrepairbyid',
RepairID: vm.repairid
, (data) =>
this.findsalesreps(data)
)
,
findsalesreps: function (data)
if(data.length>0)
this.$forceUpdate()
var vm=this
this.jobarray=data
var y=0
for(var x in this.jobarray)
vm.$Socket.emit('getsalesrep',
UserID: this.jobarray[x].UserID
, (emp) =>
this.jobarray[y]['Name']=emp[0].FirstName + " " + emp[0].LastName
++y
this.$forceUpdate()
)
,
computed:
... mapState('example', ['UserID']),
</script>
【问题讨论】：
相关问题：***.com/questions/14220321/… 我一直在阅读该文档和其他类似的文档，但没有一个解释您将如何完成我想要在这里完成的工作。我的套接字调用将数据传递给查询数据库的 NodeJS 服务器，并使用回调函数将数据传递回客户端。现在我“需要”以某种方式有一个 return 语句，因为在 VueJS 中，每当你做插值时，如果你想处理你正在循环的数据，函数必须返回一些东西 我认为模板不应该调用这样的异步函数（显然，@click 等除外）。为什么不单独从服务器加载值，将它们存储在data 中并简单地显示在模板中？无论如何，这里有一个 hacky 方式来做你的方式：codesandbox.io/s/zn1282zz4（检查 HelloWorld 组件）
【参考方案1】：
最终重新加载了整个 Quasar 开发环境，现在它可以完美运行。不知道那里发生了什么
【讨论】：
以上是关于收到此错误：无法读取未定义的属性“0”的主要内容，如果未能解决你的问题，请参考以下文章
收到此错误：处理命令时发生未知的服务器端错误。原始错误：无法读取未定义的属性“替换”
不和谐赠品| TypeError：无法读取未定义的属性“开始”
试图在 [vue.js 3] 中创建一个原型来全局访问我的 Api (Axios)，但我总是收到此错误：“无法读取未定义的属性”