如何在Vuejs

Question

我在Vuejs 2应用中使用asyncComputed，我需要过滤我从api中获取的项目列表。

这是我到目前为止所做的：

<template>
    <div class="items">
        <input type="text" v-model="searchKey">
        <li v-for="item in items">
            <span>{{item.name}}</span>
        </li>
    </div>
</template>

<script>
    import Items from '@/api/items';

    export default {
        name: 'items',
        data: {
            searchKey: ''
        }
        asyncComputed: {
            items: {
                async get() {
                    const items = await Items.getAll();
                    return items.data;
                },
                default: []
            }
        },
        methods: {},
        components: {}
    }
</script>

在这种情况下，是否可以使用带有管道运算符的过滤器，或者我是否需要创建一个全新的过滤列表并使用它，例如：

computed: {
    filteredItems: function() {
        return this.items.filter( ( item ) => item.name.toLowerCase().includes( this.searchKey.toLowerCase() );
    }
}

另外，如果我需要创建一个新的过滤列表，我该如何使用异步数据？

Answer 1

您可以在没有任何插件的情况下执行此操作，例如：

<template>
    <div class="items">
        <input type="text" v-model="searchKey">
        <select v-model="filterType">
            <option disabled value="">FilterBy</option>
                <option>name</option>
                <option>id</option>
    </select>
        <li v-for="item in filteredItems">
            <span>{{item.name}}</span>
        </li>
    </div>
</template>

<script>
    import Items from '@/api/items';

    export default {
        name: 'items',
        data: {
            searchKey: '',
            items: null,
            filterType:''
        }
        methods: {
            async fetchItems(){
                const items = await Items.getAll();
                this.items = Items.data;
            }
        },
        computed: {
            filteredItems(){
                if(this.filterType === 'name'){
                    return this.items.filter( ( item ) => item.name.toLowerCase().includes( this.searchKey.toLowerCase() );
                }

                if(this.filterType === 'id'){
                    return this.items.filter( ( item ) => item.id.includes( this.searchKey );
                }

                if(!this.filterType){
                    return this.items;
                }
            }
        },
        created(){
            this.fetchItems();
        }
    }
</script>

您甚至可以使用select输入来选择要过滤列表的条件，在本例中为id或name。