@Black_Fire

Как перерендерить элементы из отфильтрованного массива через v-for в синтаксисе script setup?

На фронте на основе массива цифер выводится список, под которым кнопка. Она вызывает обработчик для фильтрации масива от 4 до 8 (условно). Как перерендерить список после фильтрации, чтобы остались в списке от 4 до 8ми?
<template>
  <div>
    <div class="list-container">
      <ul class="list">
        <li class="list-item" v-for="(number, index) in numbers" :key="index">
          {{ number }}
        </li>
      </ul>
    </div>
    <button class="filterArray" @click="filterRange">Отфильтровать диапазон от 4 до 8</button>
  </div>
</template>

<script setup>
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function filterRange() {
  numbers.filter((number) => {
    return number >= 4 && number <= 8;
  });
  return numbers;
}
</script>

<style></style>
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
@hramtsov13
Fronted-dev. Vue.js
import { ref } from 'vue';

const numbers = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

const filterHandler = () =>
    (numbers.value = numbers.value.filter((number) => number >= 4 && number <= 8));
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы