Возврат кода статуса HTTP нескольких сайтов

Question

Этот компонент ниже предназначен для возврата кода состояния HTTP для разных сайтов на основе файла data.json. В настоящее время он показывает все сайты как «Живые», хотя второй не существует и поэтому должен показывать «404», «503» или «523». Код статуса HTTP 200 - это статус для «живых» сайтов. Я пытаюсь получить другое сообщение для каждого кода состояния в ответе.

ExampleComponent. vue

<template>
  <div class="container">
    <table class="table table-stripped table-hover" id="cont-table">
      <thead>
        <tr>
          <th>URL</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(site, index) in sites" :key="index">
          <td><a v-bind:href="getHref(site)" target="_blank">{{ site.url }}</a></td>
          <td v-if="site.status = 200"><span class="label label-success">Live</span>
          <td v-else-if="site.status = 404"><span class="label label-success">404</span></td>
          <td v-else-if="site.status = 503"><span class="label label-success">503</span></td>
          <td v-else-if="site.status = 523"><span class="label label-success">523</span></td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      siteDataUrl: "./data.json",
      sites: []
    }
  },

  created: function () {
    this.loadData();
  },

  methods: {
    getHref: function (site) {
      if (!site.port) site.port = 80;
      return `https://${site.url}:${site.port}`;
    },

    loadData: function () {
      let self = this
      fetch(this.siteDataUrl)
          .then(r => r.json())
          .then((resp) => {
              self.sites = resp
              self.getStatus();
          });
    },

    getStatus: function () {
      let self = this;
      self.sites.forEach(function (site, index) {
          let url = `https://${site.url}`;
          if (site.port && site.port != 80 && site.port != 443) url += `:${site.port}`;

          fetch(url, { mode: 'no-cors'})
              .then((resp) => {
                  site.status = false;

                  if (resp.status == 200) site.status = 200;
                  if (resp.status == 404) site.status = 404;
                  if (resp.status == 503) site.status = 503;
                  if (resp.status == 523) site.status = 523;

                  self.$set(self.sites, index, site);
              })
      })
    }
  }
}
</script>

data. json

[
  {
    "name": "",
    "url": "www.google.com",
    "port": 80
  },
  {
    "name": "",
    "url": "www.foo.com",
    "port": 443
  }
]

Answer 1

Проблема, вероятно, возникает в условиях v-if и v-else-if, в которых неправильно используется оператор присваивания (=) вместо оператора равенства .

В настоящее время он устанавливает site.status в ненулевое значение и затем оценивает результат. Поскольку результатом первого выражения является 200, первое условие всегда выполняется, в результате чего шаблон будет отображаться Live.

<td v-if="site.status = 200"><span class="label label-success">Live</span>
<td v-else-if="site.status = 404"><span class="label label-success">404</span></td>
<td v-else-if="site.status = 503"><span class="label label-success">503</span></td>
<td v-else-if="site.status = 523"><span class="label label-success">523</span></td>

Правильный оператор равенства - == или ===:

<td v-if="site.status == 200"><span class="label label-success">Live</span>
<td v-else-if="site.status == 404"><span class="label label-success">404</span></td>
<td v-else-if="site.status == 503"><span class="label label-success">503</span></td>
<td v-else-if="site.status == 523"><span class="label label-success">523</span></td>