I have retrieved data from an API and am displaying it here using VueJS. The user information is stored inside the users[] array, with two types of plans: basic_plan and standard_plan. Currently, all users are being shown.
Now I want to apply filters similar to this example: https://codepen.io/marn/pen/jeyXKL?editors=0010
I am also encountering an error stating that filter is not defined.
Filters:
<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.loadUsers();
},
methods: {
loadUsers {
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>
When "All" is selected, the Vue dev tools show this:
selectedUser:Object //OBJECT SHOWING
data:Array[10]
links:Object
meta:Object
But when the "basic" radio button is selected, Vue shows this:
selectedUser:Array[1] //ARRAY SHOWING
0:Object
price:"10"
plan:"basic_planl"