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

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

1 个答案: