Using Vue's forEach method in a computed property

I am currently working on a checkbox filter function that saves the value of clicked checkboxes in an array. However, I am encountering issues with updating the computed data as it is always returning undefined.

The structure of the data:

Casino { brand_tags { Brand_Tag_Name } }

Computed:

computed: {
    filteredCasinos: function() {
      return this.casinos.forEach(casino => {
        return casino.brand_tags.filter(brandTag => {
          return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
        })
      })
    }
},

HTML (It seems to be functioning correctly)

        <label for="Featured">Featured Casinos
          <input type="checkbox" v-model="filteredCategories" value="Featured">
        </label>
        <label for="Featured">Big Brands
          <input type="checkbox" v-model="filteredCategories" value="Big Brand">
        </label>
        <label for="Featured">New Casinos
          <input type="checkbox" v-model="filteredCategories" value="New Casino">
        </label>
        <label for="Featured">Pay n Play
          <input type="checkbox" v-model="filteredCategories" value="Pay N Play">
        </label>
        <label for="Featured">Trusted Casinos
          <input type="checkbox" v-model="filteredCategories" value="Trusted Casino">
        </label>

Answer №1

This issue occurs because when return this.casinos.forEach is executed, it results in undefined being returned.

{ getFilteredCasinos: function() {
    return this.casinos.filter(casino => {
        return !!casino.brand_tags.find(brandTag => {
            return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
        })
    })
}

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

A guide on launching a modal within a Vue router

Does anyone have a solution for displaying a modal window using the code this.$modal.showForm('Login)' in vue-router? It works fine when I do it in a Vue component, but I'm running into an error "Cannot read property '$modal' of un ...

Determine the success of an SQL query in Node.js

I've created a basic API using nodejs to connect my Flutter app with a SQL Server database, but I have a question. How can I verify if the query was successful in order to return different results? I'm attempting an update after a successful in ...

CSS Only Sidebar Dropdown (without using Bootstrap)

I want to create a sidebar with collapsible dropdown options and smooth animations using only pure css/js/html/jquery, without relying on bootstrap like I did in the past. Here is an example of what I created previously with bootstrap: Now, as a challenge ...

What is the best way to make a canvas element fit the entire browser window without causing scroll bars to appear?

My window size isn't working properly, despite attempting the following code: Javascript var game; function game() { this.canvas = document.getElementById('canvas'); this.canvasWidth = window.innerWidth; this.canvasHeight = wi ...

I am encountering an issue with running my Mocha tests. Can anyone provide assistance on how to solve this problem?

Could the issue be with the package.json file or am I not executing the proper command to run it? ...

Redirecting asynchronously in Node.js with no use of AJAX

I've been struggling with this issue for days and have already sought help, but nothing seems to be working. Whenever I attempt to redirect from a POST request in node, the browser doesn't respond. Here's how my app is structured: ./ confi ...

What is the best method for dynamically increasing the data in a shopping cart?

My goal is to stack cart items dynamically every time the addProduct() function is called. I've successfully captured the data, but I'm facing an issue where the quantity always remains at 1 on each function call. Here's the logic I've ...

Is it better to append content in JQuery rather than replacing it with .innerHTML?

Here is a function designed to retrieve older wallposts from a user, 16 at a time, and add each chunk of 16 to the end of the current list in the div called "sw1". The function works well, except when there is a wallpost containing a video or embedded obj ...

Tips for displaying a message in the model body when a bootstrap model does not have any data in jQuery

Having trouble displaying a text message in the Bootstrap modal body when there is no data available in the model. I have multiple cards in the model, and if I click on the skip or done buttons, each card will close. However, if there is only one card in t ...

Tips for navigating between tabs without using the next button in Vue.js with vue-form-wizard

I am currently working on creating tabs in vuejs using the vue-form-wizard plugin. I have encountered an issue where I am unable to directly navigate from the first tab to the second or third tab by clicking on the tab for the first time. However, once all ...

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

The build process encountered an error with the sass-loader module and was

After updating Vuetify, my web app seems to be broken. The issue appears to be related to sass-loader despite following all the instructions. The error message received is: Module build failed (from ./node_modules/sass-loader/lib/loader.js): Despite sea ...

Is there a way for me to determine which specific dependency is triggering a warning due to utilizing another dependency?

After analyzing my browser console, I found the following warnings: index.js:126 [WDS] Warnings while compiling. warnings @ index.js:126 (anonymous) @ socket.js:47 sock.onmessage @ SockJSClient.js:67 EventTarget.dispatchEvent @ sockjs.js:170 ...

MongoDB facing difficulties in updating the database

Seeking help with my MongoDB setup as I am still new to it. I have a database where card data is stored and need to update counts when users like cards, resulting in a total likes number. I'm facing an issue where I keep getting a 400 error response ...

A cookie designed to store and retain the preferred CSS stylesheet choice

I'm looking to create a cookie that will store the preference for a specific CSS stylesheet. I currently have a function in place that allows me to switch between stylesheets: function swapStylesheet(sheet){ document.getElementById('pagestyl ...

Creating a nuxt.js application from scratch without using create-nuxt-app

I am interested in learning how to build a Nuxt app without using the create-nuxt-app template. As a beginner, I would like to start a new project with Vue.js and then gradually integrate Nuxt functionality into it. I have searched online but haven't ...

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

Capture a snapshot of a webpage that includes an embedded iframe

Currently, we have a nodeJS/angular 4 website that contains an iframe from a third party (powerBI Emebdded). Our goal is to develop a feature that allows the end user to capture a screenshot of the entire page, including the content within the iframe. We ...

Experiencing difficulty in updating GitHub pages with React application

Looking for help updating my deployed active react app on GitHub pages with newer code, such as color changes and text updates. The updated code has been pushed to the main branch of my GitHub repo but the live GitHub page is not reflecting the changes. De ...

I'm confused as to why this is occurring even though the codes appear to be identical

this.state = { lat: null }; window.navigator.geolocation.getCurrentPosition( pos=>{ this.setState({lat:pos.coords.latitude}); }, err=>{ console.log(err); } ); There seems to be an issue where using setState inside a ...