What is the process for implementing a title search filter in Vue.js?

Question

What is the process for implementing a title search filter in Vue.js?

Hey there, hoping you're having a good night! I've been trying to set up a bookstore using Vue.js with code retrieved from a Json api. However, I'm encountering some issues with the "computed" property. Here's the code snippet:

new Vue({
  el: "#vue-app",
  data() {
    return {
      title: "Ubiqum Bookstore",
      books: []
    }
  },
  mounted() {
    this.getAPI('https://api.myjson.com/bins/1h3vb3');
  },
  methods: {
    getAPI() {
      axios.get('https://api.myjson.com/bins/1h3vb3')
        .then(response => {
          (this.books = response.data.books)
        })
        .catch(e => {
          console.log("No found!")
        })
    }
  },
  computed: {
    booksFilter: function() {
      var textSearch = this.textSearch;
      return this.books.filter(function(el) {
        return el.books.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
      });
    }
  },
})

I'm puzzled about why the computed property isn't functioning as expected. In my HTML, I have:

<div id="list-countries" v-if="booksFilter && booksFilter.length">
    <div class="panel panel-default" v-for="book of booksFilter">
<input id="input-search" type="text" class="form-control" v-model="search" placeholder='Search...'>

If you have any insights or solutions to this issue, I'd greatly appreciate it! Thank you very much!

javascript vue.js

Answer 1

Answer №1

To clarify, the variable this.searchText mentioned in a comment should be replaced with search in the template. Since your array consists of objects, you may want to filter by a specific attribute (such as titulo as suggested in another answer). One approach is to use includes() to determine if the input value matches the attribute you are searching for (e.g. titulo). Here is a revised solution:

data() {
  return {
    title: "Ubiqum Bookstore",
    books: [],
    search: '' // Ensure to include this property!
  }
},
// .....
computed: {
  booksFilter: function() {
    return this.books.filter(book => {
      return book.titulo.toLowerCase().includes(this.search.toLowerCase());
    });
  }
}

Update your template to:

<div v-if="booksFilter && booksFilter.length">
  <div v-for="book of booksFilter">
    <p>{{book.titulo}}</p>
  </div>
</div>

Click here for a SANDBOX to experiment with the code.

Answer 2

To clarify, the variable this.searchText mentioned in a comment should be replaced with search in the template. Since your array consists of objects, you may want to filter by a specific attribute (such as titulo as suggested in another answer). One approach is to use includes() to determine if the input value matches the attribute you are searching for (e.g. titulo). Here is a revised solution:

data() {
  return {
    title: "Ubiqum Bookstore",
    books: [],
    search: '' // Ensure to include this property!
  }
},
// .....
computed: {
  booksFilter: function() {
    return this.books.filter(book => {
      return book.titulo.toLowerCase().includes(this.search.toLowerCase());
    });
  }
}

Update your template to:

<div v-if="booksFilter && booksFilter.length">
  <div v-for="book of booksFilter">
    <p>{{book.titulo}}</p>
  </div>
</div>

Click here for a SANDBOX to experiment with the code.

Answer 3

Answer №2

There are multiple errors in your code that need to be addressed:

computed: {
    booksFilter: function() {
        var textSearch = this.textSearch; // The variable textSearch does not exist in the data or v-model, so it likely contains invalid data
        return this.books.filter(function(el) {
            // In the line below, el.books is not a valid property. If you want to match with the title, change it to el.titulo
            return el.books.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    }
}

Additionally, if you want to use the title value from the data model, you will need to adjust the computed property like this:

computed: {
    booksFilter: function() {
        return this.books.filter(el => {
            return el.titulo.toLowerCase().indexOf(this.title.toLowerCase()) !== -1;
        });
    }
}

Answer 4

There are multiple errors in your code that need to be addressed:

computed: {
    booksFilter: function() {
        var textSearch = this.textSearch; // The variable textSearch does not exist in the data or v-model, so it likely contains invalid data
        return this.books.filter(function(el) {
            // In the line below, el.books is not a valid property. If you want to match with the title, change it to el.titulo
            return el.books.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1;
        });
    }
}

Additionally, if you want to use the title value from the data model, you will need to adjust the computed property like this:

computed: {
    booksFilter: function() {
        return this.books.filter(el => {
            return el.titulo.toLowerCase().indexOf(this.title.toLowerCase()) !== -1;
        });
    }
}

What is the process for implementing a title search filter in Vue.js?

Answer №1

Answer №2

Similar questions

Close session when browser/tab is exited

How to implement hover effect to show child div within parent div using React.js

JQuery Script Perform an Action - Pause - Execute Another Action

Tips for uploading a jpg image to the server using react-camera

Unable to access res.name due to subscription in Angular

The gauge created dynamically using the justgage plugin does not display the value

Using more than one class at a time is causing issues

Basic Vue application displays only empty screens (using webpack-dev-server)

Error encountered while executing jest tests due to an unexpected import token

Determine if the input number exceeds a specified threshold by implementing JavaScript

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

Tips on ensuring the <script> section of a Vuejs single file component loads prior to the <template> section

Comparison of Vue 3 Composition API - watchEffect and watch

Having trouble getting the innerHTML update to be triggered by onchange

Saving file with HTML download button results in only HTML document being saved

Adjusting the height of a flexbox column to fit three rows within the space of two

send document through ajax

Is it possible to integrate a GWT library into Dart programming?

Is it possible to use the Husky "commit-msg" hook to git add new files?

Ways to show alternative data from a database in Laravel 8