Tips for rearranging array position retrieved from API in Vue.js

props: {
    groups: Array,
  },
  computed: {
    groups: function(arr) {
      alert('hi')
    }
  },
  
<div v-for="(item, index) in groups" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)">
</div>

What is the best way to change the position of elements in an array received from an API on the frontend?

I have successfully displayed all the values from the API on the frontend. However, I now need to implement a condition where I can re-arrange the array values. For example, I want to move the element at position 6 to position 1 in the array.

javascriptvue.jsaxios

Answer №1

If you want to sort or swap your array, one approach is to use a computed property for that purpose and then utilize it in your v-for loop.

computed: {
  rearrangeDataset () {
    if (Array.isArray(this.dataset) && this.dataset.length) {
      // Perform sorting or swapping operation here. Remember to always return a value in a computed property.
      let tmp = this.dataset[2]
      this.dataset[2] = this.dataset[0]
      this.dataset[0] = tmp
      return this.dataset
    } else {
      return []
    }
  }
}

You can now use the computed property in your v-for loop:

<div v-for="(item, index) in rearrangeDataset" :key="item.id" :id="item.id" class="group-name" @click="isOnlySelected ? null : $emit('setSelectedItem', item.id)">
</div>

Since you are using the dataset ID in a handler, mutating the dataset within a computed property and returning the modified dataset seems like a good practice.

An example demonstrating this concept can be found on codepen: https://codepen.io/LucasFer/pen/oNewOwv

Alternatively, you could also consider utilizing watch as another approach.

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

What is the best way to terminate a "for await ...of" loop if it fails to finish within a specified timeframe?

Is it possible to stop an asynchronous loop if it doesn't finish within a set time frame? I'm working with the following code: (async()=>{ for await(let t of asynDataStreamOrGenerator){ //some data processing } //some other code I n ...

javascriptecmascript-6es6-promise

What is the correct way to fetch JSON data from a remote server using pure JavaScript?

I'm receiving JSON data from a remote server at openweathermap.org. Can anyone help me identify issues with my code? Here is an example of the server's response here var getWeatherJSON = function (city) { var httpRequest = window.XMLHttpRequ ...

javascriptajaxjsonapiurl

Executing functions with directive controllers

Is there a simple way to call a function on a directive controller by accessing the instance using its id from the parent controller? <my-directive id="id1" /> var dirController = getDirectiveByID("id1"); dirController.someFunc(); If you have any ...

javascripthtmlangularjs

Error Message: ES5 mandates the use of 'new' with Constructor Map

Below is the code snippet: export class ExtendedMap<T, U> extends Map { constructor() { super(); } toggle(key: T, value: U) { if (this.has(key)) { super.delete(key); ...

javascripttypescript

What is the best way to incorporate a button that, when clicked, reveals two separate images on the frontend?

describe food option heredescribe juice option hereHow can I create a button using HTML, CSS, JavaScript, and Bootstrap that displays different images for food and juices when clicked? For example, clicking on "food" will display 3 different food images, w ...

javascripthtmlcssbootstrap-4bootstrap-5

Is it possible for me to utilize this code for logging in through a dialog box?

Here is the code snippet I have on the client side: <p>Username:</p> <p><asp:TextBox ID="tbUsername" runat="server"></asp:TextBox></p> <p>Password:</p> <p><asp:TextBox ID="tbPassword" runat="server ...

c#javascriptjqueryasp.netdialog

Trigger ng-click after ng-model updates

Is there a way to create an ng-click function that will only execute after the value of the ng-model in a scope variable changes? In my scenario, I have a list of analysis objects within a list called analyses, each with an include boolean attribute used f ...

javascriptangularjsangularjs-ng-model

What is the process for validating dates using JavaScript?

I'm currently working on a birthday validation form using JavaScript and I'm facing some issues. For instance, the date 40/40/2012 should be considered invalid but no alert is being triggered. Here is the JavaScript code: function validateBirth ...

javascriptvalidationdate

What could be causing the issue with HTML not being printed upon button click in ReactJS?

My goal is to display the word "Hello" on the screen when the add button is clicked. However, I am encountering an issue where it is not showing up. Any insights or solutions would be greatly appreciated! import React, { Component } from 'react'; ...

javascripthtmlreactjs

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Whenever I insert the code into my Blogger platform, an error pops up stating: The entity name must directly follow the '&' in the entity reference Here is the code: <script> if (typeof bc_blocks == "undefined" && wind ...

javascripthtmlcss

Adding specific props, such as fullWidth, at a certain width, like 'sm', in Material UI React

My goal is to include the fullWidth prop when the screen reaches a size of 600px or greater, which is equivalent to the breakpoint sm. I attempted to implement the following code, but unfortunately, it does not seem to be functioning as intended. [theme ...

javascriptreactjsmaterial-uiresponsive

Knockout.JS encounters difficulty retrieving the value attribute in a select tag when the data is sourced from the server

After making an ajax request and binding the dropdown list, I noticed that the select tag was not reading the value attribute. However, when I bind the drop down list in the view model, it does recognize the value. For example: It works if I bind the mode ...

javascriptajaxknockout.js

Guide to importing an npm package into a client-side file

Having some trouble importing the js-search npm package into my client-side .js file. The documentation suggests using import * as JsSearch from 'js-search';, but I keep getting a Uncaught TypeError: Failed to resolve module specifier "js-se ...

javascriptnpmnpm-package

Cypress .type is failing to properly update the v-model value in my Vue3-powered form

login.vue - this file represents the login page component <template> <v-container id="login-page"> <v-row> <v-col> <input id="username" v-model="username" data-cy="username&q ...

vue.jsvuejs3cypressnuxt3.js

Check the row in a JQuery table by using the .on("click") function to determine if a hyperlink within the row was clicked or if

I am in the process of building a website using the following libraries: Parse.js: 1.4.2 JQuery: 1.11.2 and 1.10.3 (U.I.) Twitter Bootstrap: 3.3.4 To demonstrate what I am trying to achieve, I have set up this JSfiddle with placeholder data: https://jsf ...

javascriptjqueryhtmltwitter-bootstraphyperlink

Tips for resolving the issue of 'defineExpose' method being undefined in Vue3

Struggling to pass a method from child to parent; unfortunately, the defineExpose() method seems to be malfunctioning. Could anyone provide guidance on what might be going wrong? For additional context, feel free to check out my previous question <scri ...

javascripttypescriptvuejs3vite

When using the `.push` method, the array becomes null

Currently, I am in the process of developing an angular application. Within my component's .ts file, there exists an array structured as follows: public myArray = []; public dataFromAPI = []; In a particular method within this component, whenever I ...

javascriptangulartypescriptangular9

What is the best way to incorporate a button that can toggle the visibility of the sidebar on my post page?

Check out this post of mine I noticed a button on someone's page that could hide their sidebar and expand it again when clicked. How can I implement this feature? Is it a simple task? ...

javascripthtmljekyll

The step-by-step guide on displaying API choices in an Autocomplete feature and keeping them up

Having trouble with updating autocomplete options. An error message pops up in the console log when I try to deselect a tag or select a new one: MUI: The value provided to Autocomplete is invalid. None of the options match with [{"catName":{&qu ...

javascriptreactjsmaterial-ui

Storing data in a TypeBuffer and then retrieving it from a file can lead to surprising outcomes

Upon executing the following code: var list = new Uint32Array(16); for (var i=0; i<16; ++i) list[i] = i; fs.writeFileSync("list", new Uint8Array(list).buffer); console.log([].slice.call(new Uint32Array(fs.readFileSync("list")))); We anticipate the out ...

javascriptnode.jsfileio