The index you are trying to use belongs to PCList. You are trying to access tasks array in pc with pc’s index. What you should do is to iterate through the tasks and use that index.
Solution 1 :
Problem :
I have data put into PCList array from my firebase db. each object in the array is structure as follows
pcname: '',
serialNumber: '',
MAC: '',
AnyDeskID: '',
machineType: '',
tasks: [{
completed: false,
value: "Windows Updates"
},
{
completed: false,
value: "PC Renamed"
},
{
completed: false,
value: "On Domain"
},
{
completed: false,
value: "Remote Admin Account"
},
{
completed: false,
value: "Bloatware Removed"
},
{
completed: false,
value: "Passwords added to DB"
},
{
completed: false,
value: "Store apps disabled"
},
{
completed: false,
value: "BitLocker"
},
],
installations: [{
installed: false,
value: "Chrome"
},
{
installed: false,
value: "Adobe Reader"
},
{
installed: false,
value: "Heimdal"
},
{
installed: false,
value: "Java"
},
{
installed: false,
value: "Sophos AV"
},
{
installed: false,
value: "Sophos VPN"
},
{
installed: false,
value: "TightVNC"
},
{
installed: false,
value: "VLC Player"
},
{
installed: false,
value: "Patch Manager"
},
{
installed: false,
value: "Port Replicator"
},
{
installed: false,
value: "AnyDesk"
},
{
installed: false,
value: "Microsoft Office"
},
{
installed: false,
value: "Reflections(VAX)"
},
{
installed: false,
value: ".NET Drivers"
},
{
installed: false,
value: "Visual Studio"
},
{
installed: false,
value: "ODBC Connections"
},
],
userTasks: [{
completed: false,
value: "Enabled macros"
},
{
completed: false,
value: "Helpdesk Icon Outlook"
},
{
completed: false,
value: "Word Templates"
},
{
completed: false,
value: "Power Settings Set"
},
{
completed: false,
value: "Set Default Apps"
}
],I iterarte over each one to produce a card with the details from each object. each card has a dropdown where it states what programs are installed/not installed. However when trying to access the tasks, installations or userTaks arrays within an object in the PCList array ikeep getting an error saying value or comppleted are not defined. Can someone see where ive gone wrong?
<v-flex :search="search" class="xs12 sm8 md4" v-for="(pc,index) in PCList" :key="pc.id">
<v-card class="cardMargin elevation-3" flat color="white">
<v-container fluid>
<v-layout class="row">
<v-flex class="xs12">
<v-card-title class="primary-title">
<h2>PC Name: <span>{{pc.pcname}}</span></h2>
<v-card-text>
AnyDesk ID: {{pc.AnyDeskID}}<br>
MAC: {{pc.MAC}}<br>
Serial Nmuber: {{pc.serialNumber}}
</v-card-text>
</v-card-title>
<v-card-actions class="centerActions">
<v-btn
outlined
style="margin-right: 10px"
>LEARN MORE</v-btn>
<v-btn
class="error"
color="red"
>DELETE</v-btn>
<v-btn
primary>
EDIT
</v-btn>
<v-btn
icon
@click="show = !show"
>
<v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-btn>
</v-card-actions>
<v-expand-transition>
<div v-show="show">
<v-divider></v-divider>
<v-card-text v-if="pc.tasks[index].completed">
<h2>Installed</h2>
{{pc.tasks[index].value}}
</v-card-text>
<v-card-text v-else>
<h2>Not Installed</h2>
{{pc.tasks[index].value}}
</v-card-text>
</div>
</v-expand-transition>
</v-flex>Comments
Comment posted by Robbie
perfect thank you for you’re help that worked for me
Comment posted by Cafer Elgin
you can mark the answer as accepted, it will increase your stackoverflow points