时间戳

首页 > 解决方案 > 使用 vue js 过滤数据

javascript - 使用 vue js 过滤数据

问题描述

我已经从 API 加载了一个数据，并在此处使用 VueJS 显示。我在users[]数组中有用户信息。我也有两种计划的用户：basic_plan和standard_plan. 目前它显示所有用户。

现在我想对这个例子同样应用过滤器：https ://codepen.io/marn/pen/jeyXKL?editors=0010

我也得到了一个filter未定义的错误

过滤器：

  <input type="radio" v-model="selectedItems" value="All" /> All
                <input type="radio" v-model="selectedItems" value="basic_plan" /> Basic


<ul
            v-for="(user, index) in selectedUser.data"
            :key="index"
            class="watchers divide-y divide-gray-200"
        >
            <li class="py-4">
                <div class="mx-4 flex space-x-3">
                    <span
                        class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500"
                    >
                      
                    </span>
                    <div class="flex-1 space-y-1">
                        <h3 class="text-sm font-medium">
                            {{ user.name }}
                        </h3>
                        <div class="flex items-center justify-between">
                            <p class="text-sm font-medium text-indigo-500">
                                {{ user.plan }}
                            </p>
                           
                            
                        </div>
                    </div>
                </div>
            </li>
        </ul>

       
    </div>
</template>

<script 
export default {
    data() {
        return {
            users: [],
             selectedItems:"All"
        };
    },
    created() {
        this. users();
    },
    methods: {
        users {
            axios
                .get('api/users')
                .then(response => {
                   
                        this.users = response.data;
                   
        }
    },
computed: {
        selectedUser: function() {
        
            if(this.selectedItems ==="All"){
                return this.users
            }else{
            return this.users.data.filter(function(item) {
                console.log(item)
                return item.plan === this.selectedItems;
            });
            }
        }
    }

};
</script>

当全部被选中时，vue 开发工具会显示这个

selectedUser:Object //OBJECT SHOWING
data:Array[10]
links:Object
meta:Object
but when basic radio is selected vue shows this

selectedUser:Array[1]  //ARRAY SHOWING
0:Object
price:"10"
plan:"basic_planl"

标签： javascriptvue.js

解决方案

如果要过滤掉特定用户，必须将“过滤器”功能应用于用户变量，如下所示： this.users.filter(...)

使用此功能，您可以根据用户的计划过滤用户，如下所示：

this.users.filter((user) => 
  user.plan === this.selectedItems;
});

对于现代方法，我使用了箭头函数。在不使用大括号的情况下，函数内部的语句默认返回，这就是为什么没有“return”语句的原因。

推荐阅读