Filtering IDs in an array using Vue.js

What is the best way to implement filtering in vue.js using this example?

$followid = [1,2,3,4,4,5];
foreach ($array as $element)
   if (in_array($element->id, $followid))
   endif
endforeach

Answer №1

A filter may not be the best choice for this particular scenario. It's uncertain if 'this' is accessible within a filter. My suggestion is to utilize a computed property that can return the array intended for display.

computed: {
    actifOnline: function() {
        let self = this;
        return this.online.filter((o) => {
            return self.editlistAssesments.indexOf(o) > -1
        }
    }
}

Answer №2

When using the filter function, make sure to return a boolean value:

ifInArray: function (value) {
    return this.checkIfValueExists(value) ? true : false;
}

Answer №3

I stumbled upon this question while searching for a solution to a similar issue.

My approach involved using a method to address the problem. I had an array of users and needed to compare the current logged-in user with the managers array in my model:

methods: {
    isManager( task, current_user ) {
        return task.managers.find(x => x.id === current_user.id);
    }
}

Usage:

<button v-if="isManager(task, current_user)">Approve</div>

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

Passport Authentication does not initiate a redirect

While working on a local-signup strategy, I encountered an issue where the authentication process against my empty collection was timing out after submitting the form. Despite calling passport.authenticate(), there were no redirects happening and the timeo ...

Implementing cross-app module injection in Node.js

I have two node apps/services that are currently running together: 1. the main app 2. the second app The main app is responsible for displaying all the data from different apps in the end. Currently, I have taken some code from the second app and integra ...

Discover the method for obtaining a selected element in a bootstrap dropdown that is dynamically populated

Similar to the question asked on Stack Overflow about how to display the selected item in a Bootstrap button dropdown title, the difference here is that the dropdown list is populated through an ajax response. The issue arises when trying to handle click ...

Switching between different elements in an array using React

I've got a collection of appointments and I need to create a React view that will show them one by one. Users should be able to navigate through the appointments using arrow buttons. Here's an example of what the data looks like: const arr = [ ...

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

In a unique scenario, I've encountered an issue where an anchor triggers the 'click' event before the input field, causing it to lose focus and fire the 'focusout' event. Specifically, when writing something in the input field and ...

The AngularJS promise is not resolving before the external Braintree.js script finishes loading after the HTML content has been fully

Using an external braintree.js script is necessary to generate a payment widget, and unfortunately I have no control over it. The code that needs to be included in my .html page is as follows: <div id="myClient" ng-show="false">{{myClientToken}}&l ...

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

Encountered an issue that has me puzzled. To give you some context, I attempted to create a native draggable slider using React and positioned it in the center of the screen, specifically within my Codesandbox file. The code snippet I utilized is as follow ...

Hiding labels using JQuery cannot be concealed

Why isn't this working? -_- The alert is showing, but nothing else happens. <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeaderContent"> <script type="text/javascript"> if (navigator.userA ...

Troubleshoot and resolve the issue of a page scroll freeze bug occurring while scrolling through an overflowed

My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve thi ...

An easy way to activate the save button automatically

Is there a way to automatically enable the save button when a user checks the checkbox and enters text in the input field? I'm not sure what steps are needed or if there is an alternative approach to achieve this. jQuery("input[type='text&apos ...

Guide to eliminating hashtags from the URL within a Sencha web application

I'm currently developing a Sencha web application and I need to find a way to remove the "#" from the URL that appears after "index.html". Every time I navigate to a different screen, I notice that the URL looks like this: ...../index.html#Controller ...

Determine webpage load speed using Javascript and the window.performance.timing method

Utilizing Selenium in C#, I have devised a method to calculate page load times, as demonstrated by the code snippet below: Code: Selenium C# using OpenQA.Selenium; double requestStart = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return wind ...

Utilize AngularJs and JavaScript to upload information to a JSON file

Exploring the realm of Angular JS, I am on a quest to create a CRUD form using AngularJs and Json with pure javascript without involving any other server side language. The script seems to be functioning well but is facing an obstacle when it comes to writ ...

How to retrieve the ID of a parent sibling using jQuery DataTables

I have encountered a peculiar issue while trying to retrieve the ID of a table's parent sibling. Prior to initializing jQuery DataTables, obtaining the table's ID poses no problem. However, once it is initialized and the table is built, retrievin ...

What is the method for incorporating functionality into the "X" icon within the Material UI Searchbar?

Check out this code snippet: import SearchBar from "material-ui-search-bar"; const info = [ { name: "Jane" }, { name: "Mark" }, { name: "Jason" } ]; export default function App() { const [o ...

Eliminating the impact of a CSS selector

I have a complex mark-up structure with multiple CSS classes associated: classA, classB, classC, classD. These classes are used for both styling via CSS and event binding using jQuery selectors. The Challenge: I need the jQuery events to be functional whi ...

Hover over with your mouse to open and close the dropdown menu in React JS

Just starting out with React JS and encountering a small issue. I'm trying to make the menu disappear when the mouse leaves that area, so I used onMouseOut and onMouseLeave to close it. However, I noticed that having these options in place prevents th ...

At times, Express.js may display an error message stating "Cannot GET /"

My objective is to have http://localhost:3000/app display myFile.html and http://localhost:3000/api return "It worked!". I currently have two files set up for this: App.js: const http = require('http'); const fs = require('fs&apo ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

Creating a completely static website using Nuxt.js without any need for API requests: a foolproof guide

Currently experimenting with Nuxt.js to create a static website. Is it feasible to achieve a completely static site by eliminating the use of API calls for data retrieval? During my testing, I have successfully generated all necessary files and hosted th ...