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?

could you make a codepen with example data (not axios).

J nui
– J nui

2021-07-19 20:51:22 +00:00
Commented Jul 19, 2021 at 20:51 — J nui
– J nui, Commented Jul 19, 2021 at 20:51

tony19 · Accepted Answer · 2022-07-16 01:09:55Z

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>

Arun Kumar · Accepted Answer · 2021-07-19 20:56:26Z

0

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

answered Jul 19, 2021 at 20:56

Arun Kumar

7812 bronze badges

Collectives™ on Stack Overflow

Setting up a filter in vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related