Having issues with the functionality of my Vuejs filter in my code

Within my Vue.js code, I am facing an issue. I have questions retrieved from an API along with their respective categories stored in an array called 'questions'. My goal is to be able to filter the questions based on the category that is clicked. However, my current code only displays a single question and its category, instead of showing all related questions for the selected category. Can anyone provide assistance with this?

  selectedAnswer(index) {
      this.selectedIndex = index;
      this.questions = this.questions.filter((question) =>
        question.categories.includes(index)
      );
      console.log(index);
    },

javascriptvue.js

Answer №1

Upon reviewing your code, it seems that you will need a primitive data type (such as string, number, or boolean) to filter out of your array. Alternatively, you could also consider iterating inside your filter function since you are comparing objects.

    handleSelectedAnswer(index) {
      this.selectedIndex = index;
      this.questions = this.questions.filter((question) =>
        question.categories.some((cat) => cat._id === index)
      );
    },

It is important to note that 'index' refers to the selected category ID.

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

Utilizing Ajax to retrieve an array of input textboxes and showcase the outcome within a div container

This is the form that I have designed for displaying information: <form name='foodlist' action='checkout' method='POST'> <table> <tr> <td>Product Name</td> <td>Price</t ...

javascriptphpjqueryhtmlajax

How to apply dynamic values for filtering in TypeScript?

My task is to filter out all Portfolio Lead who have English Competency set to No. var data = [{ "Employee Number": 138, "English Competency": "No", "Portfolio Lead": "x", "Maths Competency": "No" }, { "Employee Number": 1385, ...

javascriptarraysangulartypescriptfilter

How can I efficiently retrieve the server time in JavaScript using a web browser?

Is there a faster way to synchronize client-side time with server time in JavaScript? I found this solution on Stack Overflow, which seems good, but are there any other ideas that might be quicker? ...

javascriptajaxhttpclient-serverclock-synchronization

Receiving the latest global variable in JavaScript using jQuery

I keep receiving undefined type for: $(".ui-slider-handle").attr("title", '"'+current+'"'); Even though I can successfully alert the updated value of current on line 29, it seems to not be working with .at ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3

The process of updating a nested object property in Redux and React

Initially, the user object is established with properties such as name, color, and age using the SET_USER method. I need to modify the name property within the user object utilizing UPDATE_USER_NAME. However, despite trying a nested loop within UPDATE_USER ...

javascriptreactjsreact-nativereduxreact-redux

How can I transfer an array of objects obtained from an ajax call to an observable array?

One of my functions involves making an ajax call and receiving data in the callback. It looks something like this: function fetchData(callback) { //perform ajax if(callback) { callback(data.data); } } If I use the function like this: fetc ...

javascriptajaxknockout.js

Can you spot any visible QTips?

My code runs every 5 seconds and may remove or recreate elements that display a QTip to the user. How can I use JQuery to determine if a QTip is currently visible? Thank you. ...

javascriptjqueryqtip2

Axios encounters a problem: Unable to access the property '$get' as it is undefined

Find the code on github: https://github.com/aurora10/amazone-clone.git Attempting to use Axios to communicate with an API is resulting in the following error: The console shows a NUXT SSR error: TypeError: Cannot read property '$get' of undefi ...

vue.jsaxiosnuxt.js

What is the best way to retrieve an array from a promise for utilization in an Expo or React Native application?

Currently, I am in the process of developing an application that requires routing capabilities, and to achieve this, I am utilizing the OpenRouteService-JS API. The approach I have taken involves what I believe to be a promise implementation. Despite my e ...

javascriptreactjsreact-nativepromiseexpo

Troubleshooting Three JS Projection Challenges

I have been attempting to find the centroid of a polygon in 3D space and then convert its vertices to 2D screen coordinates. Unfortunately, the code I currently have is not producing the desired results. I would greatly appreciate any assistance with this ...

javascriptthree.js

Adjusting the display of HTML elements depending on geolocation authorization

I am currently facing an issue with my HTML code where I want to show an element only if the user declines to share their location with the browser. However, my code is not functioning as expected when the user rejects the location request. On the other ha ...

javascripthtmlcss

Switching over from create-react-app to NextJS, encountering difficulties with integrating ThreeJS

A while back, I had successfully implemented a 3D model viewer in React. Now, I'm facing a challenge as I try to migrate this project to Next.js. The specific issue lies with the GLTFLoader and OrbitControls dependencies that were previously imported ...

javascriptreactjsthree.jsnext.js

Add a directive on the fly, establish a connection, and display it dynamically

Within my markup, I have a tag element called popup-window which is handled by a specific directive. If I wish to incorporate multiple similar widgets that can be displayed or hidden in various locations, I currently need to include all these elements dire ...

javascripthtmlangularjs

What is the best way to retrieve the value of a URL parameter using javascript?

I need help extracting the value of a specific parameter from a list of URLs. Here are some examples: http://example.com/#!/dp/dp.php?g=4346&h=fd34&kl=45fgh&bl=nmkh http://example.com/#!/dp/dp.php?h=fd34&g=4346&kl=45fgh&bl=nmkh ht ...

javascriptregex

Identifying if a variable is redirecting

Dealing with React Router Dom V6 I am facing an issue with two loader functions that make server requests. async function fetchUserDetails(userId, userAction) { const token = getAuthToken(); const userData = await axios({ url: API.endpoint + &apos ...

javascriptreactjsreact-routerreact-router-dom

Retrieve the property of an object from within an array

I am dealing with an array structure like this: const arr = [{ name: 'One', id: 1 }, { name: 'Two', id: 2 } ]; My goal is to extract and return the name of the object if its id matches a certain value. After exp ...

javascriptecmascript-6

Perform the subtraction operation on two boolean values using Typescript

I'm working with an array: main = [{ data: x, numberField: 1; }, { data: y, numberField: 2; }, { data: x, numberField: 3; }, { data: z, numberField: 4; }, { data: ...

javascripttypescriptecmascript-6

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

javascriptcssipadextjs

Encountering issues with loading JavaScript file in Reactjs

I'm currently working with Reactjs (Nextjs) and I am in the process of integrating the home page (index.js). I have various JavaScript files located in the "public" folder and I'm unsure of where to place them. Should I include these files in "_a ...

javascriptreactjsnext.js

The function documents.getElementsById() is hindering the effectiveness of Javascript validation

I'm facing an issue with this code. If I uncomment the specific line, the form bypasses validation and goes directly to the linked page in the action attribute. However, if I keep it commented out, the validation runs smoothly, and the alert box displ ...

javascriptvalidation