vue3 filter数据筛选后如何回显

在 Vue3 中，当你使用 `v-for` 和 `filter` 过滤数据列表时，过滤后的结果并不会自动回显到原始数据上。这是因为 `filter` 是惰性计算的，它不会实时更新视图，除非你在模板中直接引用过滤后的数组。

如果你想要在用户取消筛选或者改变筛选条件后能够回显原来的数据，你需要手动处理这个过程。一种常见的做法是在数据对象上添加一个状态变量，用于保存当前的筛选条件，并维护一个未经过滤的原始数据副本。例如：

<template>
  <ul>
    <li v-for="item in unfilteredItems | filter(currentFilter)" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref, watch } from 'vue';

const items = ref([]); // 原始数据
let currentFilter = ref(''); // 筛选条件

function applyFilter(query) {
  if (query === '') {
    currentFilter.value = '';
    return items.value;
  }
  else {
    return items.value.filter(item => item.name.includes(query));
  }
}

watch(currentFilter, () => {
  unfilteredItems.value = applyFilter(currentFilter.value);
});
</script>

在这个例子中，当 `currentFilter` 变化时，`unfilteredItems` 就会更新为原始数据经过当前筛选条件过滤的结果。这样，在模板里，你可以直接绑定 `unfilteredItems` 来回显数据。