Setting up a filter in vue.js

Question

Creating a filter to sort through quotes data, but having problems with creating the correct functions.

HTML:

<template>
 <div class="home">
 <h1>{{ message }}</h1>
 <h3> Theme filter: </h3>
 <div>
 <button v-on:click="userFilterKey = 'movies'"> Search movies</button>
 <button v-on:click="userFilterKey= 'all'"> Search all</button>
 <button v-on:click="userFilterKey= 'games'"> Search games </button>
 <div v-for="quote in quotes" v-bind:key="quote.id">
 <p>Souce: {{ quote.source }} </p>
 <p>Quote: {{ quote.quote }} </p>
 <p>Theme: {{ quote.theme }} </p>
 </div>
 </div>
 </div>
</template>

Script:

import axios from "axios";
export default {
 data: function () {
 return {
 message: "Welcome to Vue.js!",
 quotes: [],
 userFilterKey: "all",
 };
 },
 methods: {
 userFilter: function () {
 return this[this.userFilterKey];
 },
 all: function () {
 return this.quotes;
 },
 movies: function () {
 return this.quotes.filter((theme) => (quotes.theme = "movies"));
 },
 books: function () {
 return this.quotes.filter((theme) => (quotes.theme = "books"));
 },
 quotesIndex: function () {
 axios
 .get("linktodata")
 .then((response) => {
 this.quotes = response.data;
 });
 },

How do I create filters to sort through the theme key of the quotes array within my link?

• J nui: could you make a codepen with example data (not axios).

Answer 1

Use a computed prop.

new Vue({
 el: '#app',
 data: () => ({
 quotes: [{
 id: 1,
 source: 'a',
 quote: '',
 theme: ''
 },
 {
 id: 2,
 source: 'b',
 quote: '',
 theme: 'movies'
 },
 {
 id: 3,
 source: 'c',
 quote: '',
 theme: 'games'
 }
 ],
 userFilterKey: "all"
 }),
 computed: {
 filteredQuotes() {
 if (this.userFilterKey === 'all') {
 return this.quotes
 }
 return this.quotes.filter(v => v.theme === this.userFilterKey)
 }
 }
})

<div id="app">
 <button @click="userFilterKey = 'all'"> Search all </button>
 <button @click="userFilterKey = 'movies'"> Search movies</button>
 <button @click="userFilterKey = 'games'"> Search games </button>
 <div v-for="quote in filteredQuotes" :key="quote.id">
 <p>Souce: {{ quote.source }} </p>
 <p>Quote: {{ quote.quote }} </p>
 <p>Theme: {{ quote.theme }} </p>
 </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.min.js"></script>

Answer 2

Try using Pipes. Its something that does the filter in client side and is faster. may be that solves your problem