Show a compilation of articles along with their corresponding identification numbers

I want to show only articles with id=1 in my VueJS view. Below is the code I have that currently displays all articles using v-for:

<div v-for="exercise in exercises"
     v-bind:key="exercise">
     <h2>{{ exercise.name }}</h2>
</div>

Here are my data:

[
    {
        "id": "1",
        "name": "Test1",
    },
    {
        "id": "2",
        "name": "Test2",
    },
    {
        "id": "1",
        "name": "Test3",
    }
]

Is there a way to filter the data based on exercice[i].id? Any help would be appreciated.

Thank you

Answer №1

Another option is to utilize conditional rendering in HTML using v-if

<template v-for="exercise in exercises" v-bind:key="exercise"
     <div v-if="exercise.id === 1">
        <h2>{{ exercise.name }}</h2>
     </div>
</template>

Alternatively, you have the option to create a computed data property as shown below

computed: {
  filteredExercies: function () {
    return this.exercises.filter(i => i.id === 1)
  },
}

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

The Vue Firebase Storage delete image function is encountering an error stating that the user does not have the necessary permissions to access

Below is the delete method being used: async deleteAvatar(path) { console.log({ path }); try { const imageRef = ref(storage, path); console.log({ imageRef }); await deleteObject(imageRef); } catch (error) { ...

What are the different scenarios in AngularJS where $scope is utilized versus when var is utilized?

Which is more efficient in AngularJS: using var or $scope. for variables inside functions? I am asking this question because I recently came across information about $watch, $digest, and $apply in AngularJS. While I may not have fully grasped the concept ...

Creating a switch statement that evaluates the id of $(this) element as a case

I have a menu bar with blocks inside a div. I am looking to create a jQuery script that changes the class of surrounding blocks in the menu when hovering over a specific one. My idea is to use a switch statement that checks the ID of $(this) and then modif ...

What is the best approach to accessing a key within a deeply nested array in JavaScript that recursion cannot reach?

After hours of research, I have come across a perplexing issue that seems to have a simple solution. However, despite searching through various forums for help, I have reached an impasse. During my visit to an online React website, I stumbled upon the web ...

Submitting a nested JSON body in ASP MVC

I'm currently struggling to send a nested JSON body to an API, and I've tried a few different approaches without success. The JSON values are sourced from multiple models, making it quite complex for me to handle. Any assistance or guidance on th ...

Using CORS with Spring Boot and React Admin in React applications

For the admin interface, I am utilizing a tool called "React Admin" along with Spring Boot for my REST API. The React app's URL is: "http://localhost:3000", while the Spring Boot API's URL is: "http://localhost:8080". In my project, I have a sep ...

What is the process for incorporating an external script into a Vue component?

Seeking assistance urgently... I am encountering an issue with a Vue component and an endpoint that provides a script containing a small menu with actions. However, once the script is loaded, the actions do not seem to function on the page and I cannot det ...

Check if a rotated rectangle lies within the circular boundary of the canvas

I have a rectangular shape that has been rotated using the ctx.rotate method, and there is also an arc on the canvas. My goal is to determine if any part of the rectangle lies within the boundaries of the arc. See the example below: https://i.sstatic.net/ ...

Exploring the potentials of REST services using the .Net 2.0 framework in conjunction with integrating REST consumption in JavaScript

According to Wikipedia, REST is defined as REST is considered to be the architectural style of the World Wide Web. It was developed alongside the HTTP/1.1 protocol, while building upon the design of HTTP/1.0 The practices of REST have been in existence ...

tablesorter retains information even when it is running the ".empty()" function

Having an issue with the jquery tablesorter plugin. For some reason, it's not clearing the data after fetching new data from my JSON source. I've tried moving the tablesorter call around but it keeps appending to itself. Interestingly, when I ...

Storing transformed values in a React Functional Component: Best Practices and Considerations

Imagine having a complex calculation function like this: function heavyCalculator(str:string):string{ //Performing heavy calculations here return result; } function SomeComponent({prop1,prop2,prop3,prop4}:Props){ useEffect(()=>{ const result ...

The Mongoose function findbyIdAndRemove is currently not working properly when triggered on the client-side

I have a specific route in my app that uses the mongoose method findByIdAndRemove. Strangely, when I test this route using postman, it successfully deletes documents from my database. However, when I try to call this method from my client-side JavaScript f ...

dispatch a WebSocket message within a route using Express.js

The Objective: Imagine a bustling marketplace with multiple shops. I'm working on a dedicated page localhost:3000/livePurchases/:storeId for shop owners to receive real-time notifications whenever they make a new sale. https://i.stack.imgur.com/VdNz ...

What are the pros and cons of using a piped connection for Puppeteer instead of a websocket?

When it comes to connecting Puppeteer to the browser, you have two options: using a websocket (default) or a pipe. puppeteer.launch({ pipe: true }); What distinguishes these approaches? What are the benefits and drawbacks of each method? How do I know wh ...

Error encountered: angular-php API unavailable following the minification process

After setting up a basic angular-php yeoman app to experiment with, I encountered an issue. angular-php Running grunt serve functioned correctly and retrieved data using rest with $http.get('/api/features').... However, upon minifying the proj ...

jQuery append allows for the addition of multiple items simultaneously

I need assistance with automatically creating a div when clicking on a button. I'm encountering an issue where each click increments the display of the div. Can you provide some guidance on how to resolve this problem? ...

How to update a deeply nested object within a mongoose document

I've been struggling to update a specific object within a Mongodb document using the findOneAndUpdate() method. Here is a snippet of my collection structure: { _id: new ObjectId("61da0ab855483312e8f4483b"), products: [ { creat ...

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

What is the process for bundling a separate JavaScript file with Webpack5?

I am new to the world of webpack. I have 2 javascript files and I want to designate one as the main entry file. However, for the other file, I only want to include it in specific files. For example, looking at the file structure below, main.js is my entr ...

Experiencing difficulties integrating react-moveable with NEXTjs: Error encountered - Unable to access property 'userAgent' as it is undefined

I've been grappling with this problem for the past few hours. I have successfully implemented react-moveable in a simple node.js app, but when I attempt to integrate it into a NEXTjs app, an error crops up: TypeError: Cannot read property 'userAg ...