Содержимое не отображается, если не прокомментировано, а затем не прокомментировано - PullRequest
Новая
       24

Содержимое не отображается, если не прокомментировано, а затем не прокомментировано

0 голосов
/ 17 марта 2019

Я работаю с панелью расширения, которая при нажатии вызывает API-интерфейс, заполняя v-card и v-layout данными ответа.Проблема, с которой я сталкиваюсь, заключается в том, что изначально v-layout не заполняется.

Если я закомментирую элементы v-flex, v-layout сгенерирует и отобразит ожидаемое количество строк (которыетеперь пусто и пусто).Затем я раскомментирую v-flex, который правильно отображает данные в v-layout.

Ниже приведен код шаблона, который я использую, наряду с вызовом API, который используется при нажатии v-expansion-panel-content:

<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 слишком долго реагирует, это правда?Если да, то каков приемлемый способ обработки этого сценария?

Спасибо.

1 Ответ

1 голос
/ 17 марта 2019

Используйте 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)
  });
}
...