[Предупреждение Vue]: ошибка при рендеринге: «TypeError: невозможно получить свойство «Id» неопределенной или нулевой ссылки

протестировал его с Chrome, Firefox, Opera и Internet Explorer, и ошибка возникает только в Firefox.

У меня есть два вычисляемых свойства в vue js, и они изменяются почти одновременно.
когда я меняю свое поле выбора, оба срабатывают, потому что this.gekozenWinding изменяются, когда я выбираю другой параметр внутри поля выбора.

Вот мой код для обоих свойств:

kant() {
  if (this.gekozenWinding != null) {
    var id = this.haalID(this.windings, this.gekozenWinding);
    parseInt(id);
    if (id < 5 && id > 0) return true;
    else {
      return false;
    }
  }
},
graden() {
  if (this.gekozenWinding != null) {
    var id = this.haalID(this.windings, this.gekozenWinding);
    switch (id) {
      case "1":
        return "180"; break;
      case "2":
        return "0"; break;
      case "3":
        return "270"; break;
      case "4":
        return "90"; break;
      case "5":
        return "180"; break;
      case "6":
        return "0"; break;
      case "7":
        return "270"; break;
      case "8":
        return "90"; break;
    }
  } else {
    return "0";
  }
}

Мой метод haalID()

    haalID(lijst, item) {
  /*
  1.Filters out given item(string) from a lijst(array).
  2.Gets the ID from the filtered object.
  3. returns the ID
  */
  var id = lijst.filter(i => i.Descriptions[0].Description == item);
  id = id[0].Id;
  return id;
}

А это внутри моего шаблона

          <div class="row">
        <div class="form-group col-9">
          <label>Winding</label>
          <select
            class="form-control"
            v-model="gekozenWinding"
          >
            <option
              v-for="winding in windings"
              v-bind:key="winding.Id"
            >{{winding.Descriptions[0].Description}}</option>
          </select>
        </div>
      </div>
      <div v-if="gekozenWinding != null && gekozenWinding != 'To determine'">
        <div class="parent1" v-if="kant ">
          <img id="fto1" src="../assets/buitenkant.png" alt>
          <img
            id="fto2"
            v-bind:style="{'transform': `rotate(${graden}deg)`}"
            src="../assets/A.png"
            alt
          >
        </div>
        <div class="parent2" v-else>
          <img id="fto3" src="../assets/Binnenkant.png" alt>
          <img
            id="fto4"
            v-bind:style="{'transform': `rotate(${graden}deg)`}"
            src="../assets/A.png"
            alt
          >
        </div>
      </div>

Опять же, это происходит только в Internet Explorer (используя 11), другие браузеры работают отлично.
Я даже несколько раз пытался изменить свой код, но не смог заставить его работать в IE.


javascript vue.js computed-properties internet-explorer
person DES PRO    schedule 19.12.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Стрелочные функции не поддерживаются в IE11 (или любом другом IE, если уж на то пошло).

caniuse.com/#search=arrow%20functions –

Вам нужно будет использовать компилятор, такой как Babel, или избегать стрелочных функций.

var id = lijst.filter(function (i) {
  return i.Descriptions[0].Description == item;
});
person paddyfields    schedule 19.12.2018
comment
по-прежнему получаю ту же ошибку только в IE. Даже пытался поместить код метода (haalID) прямо в мои свойства. - person DES PRO; 19.12.2018
comment
Обнаружил проблему, он не будет фильтровать, если строка является предложением, поэтому я удалил пробел из элемента (строка) и описания (свойство) - person DES PRO; 19.12.2018

arrow_upward
0
arrow_downward

Вероятно, эта ошибка в шаблоне. (У вашего windings есть Id)?

Измените key на $index в опции v-for

<option v-for="(winding, $index) in windings"
    v-bind:key="$index">
{{winding.Descriptions[0].Description}}</option>

PS: Не знаю, почему вы не видите эту ошибку в других браузерах.

person pranavjindal999    schedule 19.12.2018
comment
Обнаружил проблему, он не будет фильтровать, если строка является предложением, поэтому я удалил пробел из элемента (строка) и описания (свойство). - person DES PRO; 19.12.2018