相关疑难解决方法(0)

Vue.js为空过滤结果

在Vue中,我必须过滤一些数据:

<input v-model="search">
<ul>
    <li v-repeat="photo in photos | filterBy search in 'name'">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

如何检测空的过滤器结果并向用户显示相应的消息?

编辑

我目前正在做以下工作,我觉得这是一个hacky解决方法:

HTML:

<input v-model="search">
<ul>
    <li v-repeat="photo in photos">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

var v = new Vue({
    data: {
        allPhotos: [...],
        photos: [],
        search: '',
    },
    ready: function () {
        var filter = Vue.filter('filterBy');
        var self = …
Run Code Online (Sandbox Code Playgroud)

vue.js

16
推荐指数
2
解决办法
1万
查看次数

标签 统计

vue.js ×1