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

Question

[Black_Fire]

На фронте на основе массива цифер выводится список, под которым кнопка. Она вызывает обработчик для фильтрации масива от 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>

Comments

[Антон Антон]

Начать с изучения js, например, что делает функция filter.
Затем переходить к изучению реактивности vue

[Black_Fire]

Антон Антон, серьезно? по существу нет инфы?

[Антон Антон]

Black_Fire, серьёзнее некуда. По существу - по ссылкам.

Answer 1

[Михаил Храмцов]

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));