Question

我正在尝试具有自定义过滤器搜索功能。当我尝试根据过滤器搜索中的关键字过滤记录时，它什么也不做，只显示所有帖子。总是将this.search设为”。在这种情况下，可能的解决方法是什么？

<form>
    <fieldset class="w-100 left">
        <input type="text" placeholder="Filter posts by keyword" v-model="search"/>
    </fieldset> 
</form>
<div>
    <div id="mainSec">
        <div v-for="post in filteredPosts">

            <div v-for="result in results" v-if="post.userId == result.id" class="left ml-3 mt-3" > 
                <p >{{result.name}}</p>
                <p>{{result.email}} | {{result.address.city}}</p>
            </div>  
            <p style="float:left;width:100%"><strong>{{post.title.toUpperCase()}}</strong></p>
            <p style="float:left;width:100%">{{post.body}}</p>
        </div>  
    </div>
</div>
</html>
<script>

var  vm = new Vue({
    el: '#mainSec',
    data() {
        return {
            search : '',
            results : [],
            posts : []
        };
    },
    async created() {
            try{
                axios.get(urlUsers).then(response => {
                    this.results = response.data
                });
                axios.get(urlPosts).then(response => {
                    this.posts = response.data
                });

            }
            catch(error){
                console.log("Error is " + error);
            }

    },
    computed : {
        filteredPosts (){
            if(this.search){
                return this.posts.filter((item)=>{
                    return item.title.match(this.search);
            })
        }else{
            return this.posts;
        }
    }
})
</script>

Answer 1

这可能是因为您使用el: '#mainSec',来定位HTML代码的一部分。这意味着v-model="search"不执行任何操作，因此变量永远不会更新，计算的内容永远不会触发。

最简单的解决方法是将<form> AND 包裹在<div id="mainSec">的div上，并将其赋予mainSec ID。（或为其提供单独的ID，然后在您的Vue el属性中引用该ID。

Vuejs自定义搜索过滤器不适用于计算

1 个答案: