for循环中的索引在带有vuetify的vue.js中不起作用

Question

我有数据从我的 firebase db 放入 PCList 数组。 数组中每个object结构如下

 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" } ],

我对每一个进行迭代以制作一张卡片，其中包含每个 object 的详细信息。 每张卡都有一个下拉列表，其中说明已安装/未安装哪些程序。 但是，当尝试访问 PCList 数组 ikeep 中的 object 中的任务、安装或用户任务 arrays 时，未定义错误提示值或已完成。 有人可以看到我哪里出错了吗？

 <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>

Answer 1

您尝试使用的索引属于 PCList。 您正在尝试使用 pc 的索引访问 pc 中的任务数组。 您应该做的是遍历任务并使用该索引。