Can VueJS Computed handle multiple filters at once?

I am encountering an issue with this code - when I attempt to add another filter inside the computed section, it doesn't work. However, if I remove the additional filter, the code functions correctly.

My goal is to have both company and product searches on a single page. The companies filter works without any issues, but as soon as I include the products filter, there are complications.

    new Vue({
        el: '#app',
        data () {
            return {
            info: [],
            products: [],
            search: '',
            prosearch: ''
            }
        },
        mounted () {
            axios
            .get(`${URL}/api/`)
            .then(response => (this.info = response.data))

             axios
            .get(`${URL}/api/`)
            .then(response => (this.products = response.data))
        },
        computed:{
            filterdata: function(){
                return this.info.filter((info)=>{
                    return info.name.match(this.search)
                });
            },
            AdditionalFilterData: function(){
                return this.products.filter((product)=>{
                    return product.name.match(this.prosearch)
                });
            },
        }
})

Answer №1

After running your code with mock data, everything seems to be functioning perfectly. The issue doesn't lie in your computed properties, but rather in fetching the data from APIs.

Feel free to take a look at this Link

Since no errors were provided, let me clarify the situation for you. When you fetch data from APIs in the mounted hook, the markup has already been rendered before the promises are resolved by Axios. As a result, the product and info arrays do not contain any data at that point. This leads to potential issues when using Anotherfilterdata or filterdata, as one of them might be missing data, causing the code to break.

I recommend checking the console for any errors related to the scenario described above.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maintaining the functionality of an AJAX web page even after extended periods of inactivity

When using my one-page web app, I sometimes leave the page open overnight and find that when I come back in the morning, things don't work as they should. It seems like Javascript is acting up - edit-in-place loads incorrect data, ajax calls fail to f ...

Is Ajax still a popular choice for developing web applications?

Currently, I am developing a comprehensive ajax-based web application and have been investigating various frameworks for SEO optimization and history tracking. During my research, I came across an interesting framework at Although it seems promising, I no ...

Is there a way to automatically activate the "Add" button when I hit the enter key in the text box?

Being someone who relies on to-do lists, I implemented a system where you can input tasks into a textbox and click the add button to see them listed below. However, I found it cumbersome to keep clicking the add button every time I wanted to quickly add mu ...

Vue.js throws an error because it is unable to access the "title" property of an undefined value

I am currently facing an error and unable to find a solution. Even after changing the title to 'title', the error persists. methods.vue: <template> <div> <h1>we may include some data here, with data number {{ counter ...

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

JavaScript slowness

Currently, I am developing a test page that consists of buttons triggering various scripts. One of the functionalities I am trying to implement is changing the background color every second for 5 seconds, cycling through a total of 5 different colors. Desp ...

Revise the model and execute the function

When updating my model object, I am looking for a way to trigger a specific method. I have considered options such as: findOne modifying my properties calling the method on the object save Is there a way to achieve this using update or findOneAndUpdate ...

What is the response of Express when it encounters numerous identical asynchronous requests from the same origin?

Currently, I am utilizing Express.js for my project. There is an async function that performs a task that can take anywhere from 20 to 30 seconds to complete. Once the task is done, it increases a user's counter in the database. However, users are req ...

What is the best way to send form data to MongoDB using React?

I am seeking guidance on how to pass the values of form inputs to my MongoDB database. I am unsure of the process and need assistance. From what I understand, in the post request within my express route where a new Bounty is instantiated, I believe I need ...

Exploring the Power of Ajax Interceptor in Framework7-vue-cli

I have a challenge where I need to redirect all ajax requests with a status code of -1 in the response to the login screen. Despite my efforts, I am unable to monitor it. What steps should I take next? Appreciate your help. My approach: app.js Framework7. ...

What is the process for setting the first option in a select as the default in Vue3?

I'm having trouble setting the first option as selected when populating a select element in Vue 3. Despite reading this question, none of the solutions seem to work for me. Below is my code: JS: const newOfferApp = createApp({ data() { r ...

What is the best way to reset the state in vuex store?

My vuex store contains a lot of data. Is there an efficient way to clear all the state data at once, rather than having to manually set each item to null? ...

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

Showing a restricted number of rows in the JSP page

<table class="grid_alt" cellspacing="0" rules="all" border="1" id="id1" style="width:720px;border-collapse:collapse;"> <tbody> <tr align="left"> <th scope="col"><%=partner %></th><th scope="col"><%=item %>< ...

How can I create a responsive design for my div elements?

I am facing an issue with responsiveness in my div container. Inside the square-shaped frame, I have a h2 tag that does not adjust properly when viewed on different devices such as mobile and browsers. Despite setting up media queries to make it responsive ...

Uncovering data from a dynamic website through the combination of Selenium and PhantomJS

I am attempting to obtain the timer value from this website http://prntscr.com/kcbwd8 located at , and ideally save it in a variable. import urllib from bs4 import BeautifulSoup as bs import time import requests from selenium import webdriver from urllib. ...

Creating an Ajax Post request for API invocation

I'm currently setting up an Ajax Post request to interact with an API. Here is a mock curl command for reference: curl -X POST \ --header 'Content-Type: application/json' \ --header 'Accept: application/json' \ --h ...

"Struggling with a basic Javascript function to refresh parts of a web page by calling a .php

After spending several hours browsing the internet, I am still struggling to get this straightforward example to function properly. Could someone please lend me a hand? My goal is to use JavaScript to display the contents of a PHP file. The display should ...

Utilizing React: passing a Component as a prop and enhancing it with additional properties

My question involves a versatile component setup like the one below const Img = ({ component }) => { const image_ref = useRef() return ( <> {component ref={image_ref} } </> ) } I am exploring ways to use this compo ...

Identify the Vuex store to be used in the component

I've organized my Vuex store into modules and want child-components to access the same data/stores as their parent component. Here's my approach so far: <!-- ParentOne.vue --> <template> <div> <child-component vuex-sto ...