Фильтрация по массиву после метода GET

Question

ребята, вы можете объяснить, почему он не работает?

Я ПОЛУЧАЮ массив из моего backend rails API, который дает мне данные правильно. Теперь я создал пустой массив, в котором я фильтрую свои записи по их идентификатору.

Он делает это правильно, но всякий раз, когда я обновляю sh мою страницу, мои методы filterRecords не вызывают, это просто дает мне пустой массив.

Здесь я просматриваю этот массив и записываю описание в мои filterRecords:

<h1
          class="content"
          v-for="(record, index) of filteredRecords"
          :key="index"
          :record="record"
          :class="{ 'is-active': index === activeSpan }"
        >
          
          <strong>{{ record.description }} </strong>
        </h1>

Это мой filterRecords () в вычисленном:

computed: {
    ...mapGetters({
      id: "id"
    }),
    
    filteredRecords() {
      return this.records.filter(record => {
        return record.template_id === this.id;
      });
    }
  },

this вот как я получаю данные из API:

created() {
    
    if (!localStorage.signedIn) {
      this.$router.replace("/");
    } else {
      this.$http.secured
        .get("/api/v1/records")
        .then(response => {
          this.records = response.data;
        })
        .catch(error => this.setError(error, "Something went wrong"));
      
    }
  },

Итак, как мне сделать эту работу, чтобы при перезагрузке страницы она получала записи, а после этого фильтровалась через нее (вызывает вычисленный метод filterRecords )

Спасибо!

EDIT

привет проблема заключалась в том, что я использовал return record.template_id === this.id;

, и он должен просто возвращать record.template_id == this.id;

, так как это разные типы данных.

Answer 1

Попробуйте приведенный ниже код один раз

computed: {
    ...mapGetters({
      id: "id"
    }),
    
    filteredRecords: function () {
      let localId = this.id;
      let filtered = this.records.filter(record => {
        return record.template_id == localId;
      });
      console.log(localId);
      console.log(filtered);
      return filtered;
    }
  },

Если это не сработает, можете ли вы зарегистрировать 'this.id' и посмотреть, что регистрируется.

Answer 2

Это происходит потому, что перезапись значений массива не является реактивной. Итак, Vue не обнаруживает изменения и не вызывает ваше вычисленное свойство. Попробуйте это:

this.records.splice(0, this.records.length - 1, ...response.data)

Подробнее об этом вы можете прочитать здесь: Глубинная реактивность

.splice будет работать, потому что Vue обертывает этот метод и сделайте немного магии c под капотом

Edit 1

for(let i = 0; i < response.data - 1; i++) {
  Vue.set(this.records, i, response.data[i]);
}

Edit 2

После обсуждения в чате мы выяснили, что есть вторая проблема с типами (id элемента, возвращаемого из бэкэнда, является строкой, а localId - числом, поэтому .filter вернет пустой массив). Решение состоит в том, чтобы использовать == вместо ===, но я бы предложил использовать:

 record.template_id.toString() === this.id.toString()

Тогда мы будем уверены, что оба идентификатора являются строками