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

Question

我将数据从我的firebase数据库放到PCList数组中。数组中的每个对象的结构如下

​

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

​

我遍历每个对象，生成一个包含每个对象的详细信息的卡片。每张卡都有一个下拉列表，其中说明已安装/未安装哪些程序。但是，当尝试访问PCList数组中对象中的tasks、installations或userTaks数组时，我总是收到一个错误，提示未定义value或comppleted。有人能看到我哪里错了吗？

​

<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中的任务数组。您应该做的是遍历任务并使用该索引。