How can I implement list filtering in Vue 3?

How can I implement list filtering in Vue 3?

You can implement list filtering in Vue 3 by using computed properties to filter your data based on user input.

Can you show me a code example?

Sure! Here's a simple example:

<template>
  <input v-model="search" placeholder="Filter items..." />
  <ul>
    <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Cherry' }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.name.toLowerCase().includes(this.search.toLowerCase()));
    }
  }
};
</script>

What if I want to filter by multiple criteria?

You can modify the filteredItems computed property to include additional conditions for filtering based on other criteria.