Breaking News: Grepper is joining You.com. Read the official announcement!

input filter vue 3 js

Busy Bison answered on March 9, 2024 Popularity 1/10 Helpfulness 1/10

answer input filter vue 3 js

input filter vue 3 js

Comment

<template>
  <div id="table-cms" class="table-cms">
    <input class="search-field textfield-closed" type="search" placeholder="Search" v-model="filter">
    <p>{{ filter }}</p>
    <p>{{ state.array }}</p>
  </div>
</template>


<script setup>
import {computed, reactive} from "vue";

const state = reactive({
    search: null,
    array: [
        {id: 1, title: 'Thanos', content: '123'},
        {id: 2, title: 'Deadpool', content: '456'},
        {id: 3, title: 'Batman', content: '789'}
    ]
})

const filter = computed({
    get() {
        console.log('check1')
        return state.search
    },
    set() {
        if (state.search) {
            console.log('check2a')
            return state.array.filter(item => {
                return state.search
                    .toLowerCase()
                    .split(" ")
                    .every(v => item.title.toLowerCase().includes(v))
            });
        } else {
            console.log('check2b')
            return state.array;
        }
    }
})
</script>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: input-filter javascript

Link to this answer
Share Copy Link