Я пытаюсь настроить отображение div и всего, что внутри div, на «none», как только будет выбрана вкладка, в которой находятся div.Однако, хотя у меня есть правильные имена идентификаторов, он не читает их и говорит, что они не определены.Я думаю, что это как-то связано с рендерингом q-tab-pane после запуска функции, но я не знаю, как это исправить.Я приложил мой HTML-код и основной код JavaScript ниже.Метод, который я использую для этого, называется «hideforms ()»
Я уже пытался перемещаться по определенным элементам div и записывать в консоли все, что мог.Всякий раз, когда функция запускается при выборе вкладки, журнал консоли показывает, что идентификатор не определен.Буду признателен за любую помощь, так как я много чего пробовал на данный момент
<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 >
<q-tab default name="searchbyid" label="Search by ID" slot="title"/>
<q-tab name="customfilter" label="Custom Filters" slot="title" @select="tabchanged()"/>
<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>
<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">
<div>
<q-input placeholder="Customer First Name" color="secondary" v-model="fname" class="inputspace" id="fname"/>
<q-input placeholder="Customer Last Name" color="secondary" v-model="lname" class="inputspace" id="lname"/>
</div>
<div>
<q-select
class="inputspace"
id="brand"
color="secondary"
filter
placeholder="Machine Brand"
v-model="brand"
:options="Brands"
@input="brandchanged()"
/>
<q-select
class="inputspace"
id="color"
color="secondary"
filter
placeholder="Machine Color"
v-model="color"
:options="Colors"
@input="colorchanged()"
/>
<q-select
class="inputspace"
id="type"
color="secondary"
filter
placeholder="Machine Type"
v-model="type"
:options="Types"
@input="typechanged()"
/>
<q-input placeholder="Model" color="secondary" v-model="model" class="inputspace" id="model"/>
</div>
<div class="column">
<q-checkbox label="Warranty" color="secondary" v-model="warranty" class="inputspace" id="warranty"/>
<q-checkbox label="Purchased Here" color="secondary" v-model="purchased" class="inputspace" id="purchased"/>
<q-checkbox label="Rush Service" color="secondary" v-model="rushservice" class="inputspace" id="rushservice"/>
<q-checkbox label="Completed" color="secondary" v-model="completed" class="inputspace" id="completed"/>
</div>
</div>
</div>
</q-tab-pane>
</q-tabs>
</div>
</div>
</div>
</div>
</template>
methods: {
tabchanged: function () {
this.hideforms()
},
RepairId: function () {
},
brandchanged: function () {
if(this.brand=="none")
{
this.brand=""
}
},
colorchanged: function () {
if(this.color=="none")
{
this.color=""
}
},
typechanged: function () {
if(this.type=="none")
{
this.type=""
}
},
clearfilters: function () {
this.filtersselected=[]
this.hideforms()
this.clearforms()
},
filterchanged: function () {
if(this.containsvar("selectall"))
{
this.filtersselected=[]
this.filtersselected.push("completed", "rushservice", "purchased", "warranty", "type", "color", "brand", "cusfname", "cuslname", "model")
}
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
}
this.hideforms()
},
setdisplay: function (id, bool) {
if(bool==true)
{
document.getElementById(id).style.display="flex"
}
else
{
document.getElementById(id).style.display="none"
}
},
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
},
hideforms: function () {
if(this.filtersselected.length==0)
{
document.getElementById("filterinput").style.display="none"
}
else
{
document.getElementById("filterinput").style.display="flex"
}
this.setdisplay("fname", this.containsvar("cusfname"))
this.setdisplay("lname", this.containsvar("cuslname"))
this.setdisplay("brand", this.containsvar("brand"))
this.setdisplay("color", this.containsvar("color"))
this.setdisplay("type", this.containsvar("type"))
this.setdisplay("warranty", this.containsvar("warranty"))
this.setdisplay("purchased", this.containsvar("purchased"))
this.setdisplay("rushservice", this.containsvar("rushservice"))
this.setdisplay("completed", this.containsvar("completed"))
this.setdisplay("model", this.containsvar("model"))
}
}