内容不显示，除非注释，然后未注释

Question

我正在使用一个扩展面板，它在单击时进行API调用，用响应数据填充v-card和v-layout。我面临的挑战是，最初，v-layout没有被填充。

如果我注释掉v-flex元素，v-layout将生成和显示期望的行数(现在为空和空)。然后，我取消了v-flex的注释，它正确地在v-layout中显示数据。

下面是我使用的模板代码，以及单击v-expansion-panel-content时使用的API调用：

<v-expansion-panel expand>
  <v-expansion-panel-content v-for="(device, index) in devices" :key="index">
    <div slot="header" @click="requestDeviceBreadcrumbs(device.id);">
      <v-card flat>
        <v-layout row wrap class="pa-3 project" :class="inAlarm(device)">
          <v-flex xs12 md6>
            <div class="caption grey--text">Location</div>
            <div>{{ device.location }}</div>
          </v-flex>
          <v-flex xs6 sm4 md2>
            <div class="caption grey--text">Address</div>
            <div>{{ device.ip_address }}:{{ device.http_port_number }}</div>
          </v-flex>
          <v-flex xs6 sm4 md2>
            <div class="caption grey--text">Manufacturer</div>
            <div>{{ device.manufacturer }}</div>
          </v-flex>
          <v-flex xs2 sm4 md2>
            <div class="right">
              <v-chip small class="white--text caption my-2" :class="inAlarm(device)">
                {{ device.alarm_count }}
              </v-chip>
            </div>
          </v-flex>
        </v-layout>
      </v-card>
    </div>
    <v-card flat>
      <v-layout row wrap class="pa-3 project" v-for="(breadcrumb, index) in device.breadcrumbs" :key="index" >
        <v-flex xs12 md6>
          <div class="caption grey--text">Oid</div>
          <div>{{ breadcrumb.oid }}</div>
        </v-flex>
        <v-flex xs6 sm4 md3>
          <div class="caption grey--text">Value</div>
          <div>{{ breadcrumb.value }}</div>
        </v-flex>
        <v-flex xs6 sm4 md3>
          <div class="caption grey--text">Timestamp</div>
          <div>{{ breadcrumb.timestamp }}</div>
        </v-flex>
      </v-layout>
      <v-divider></v-divider>
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

以及我的API请求函数：

requestDeviceBreadcrumbs: function(device_id) {
  axios({
    method: "get",
    url: `http://127.0.0.1:8000/api/v1/breadcrumbs/?device=${device_id}`
  }).then(response => {
    this.devices.find(obj => obj.id === device_id).breadcrumbs =
      response.data;
  });
}

我担心API的响应时间太长了，是这样吗？如果是这样的话，如何处理这种情况是可以接受的？

谢谢。

Answer 1

使用Vue.set向一个device添加/更新一个反应性属性

requestDeviceBreadcrumbs: function(device_id) {
  axios({
    method: "get",
    url: `http://127.0.0.1:8000/api/v1/breadcrumbs/?device=${device_id}`
  }).then(response => {
    let device = this.devices.find(obj => obj.id === device_id)
    this.$set(device, 'breacrumbs', response.data)
  });
}