除非评论然后取消评论，否则不会显示内容

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)
  });
}