Vuejs filter

by von

HTML

<div id="app">
        <label>
            Search name: <input type="text" v-model='searchString'>
        </label> <br>
        <transition-group tag='ul' name='my-list'>
            <li v-for='item in filteredList' :key='item.id' class="my-list-item">
                {{item.name}}
            </li>
        </transition-group>
    </div>

CSS

.my-list-item {
        list-style: none;
        transition: all 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        margin: 0px 20px 20px 0px;
        border: 1px solid red;
        width: 100px;
        height: 50px;
        word-wrap: break-word;
        text-align: center;
        overflow: hidden;
    }

    .my-list-enter, .my-list-leave-to {
        transform: translateY(200px);
        opacity: 0;
    }

    .my-list-leave-active {
        position: absolute;
    }

    ul {
        padding: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

JavaScript

const app = new Vue({
        el: '#app',
        beforeMount() {
            const req = fetch('https://jsonplaceholder.typicode.com/users');
            req.then(response => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error('Bad request: ' + response.status);
            })
            .then(users => {
                this.users = users;
                this.nextId = this.users.length + 1;
            });
        },
        data: {
            searchString: '',
            users: [
            {id: 1, name: 'Alex'},
            {id: 2, name: 'Bob'},
            {id: 3, name: 'Sandy'},
            ],
        },
        computed: {
            filteredList: function() {
                const searchString = this.searchString.toLowerCase();
                return this.users.filter(item => item.name.toLowerCase().includes(searchString));
            }
        }
    });