Is it possible to utilize a dynamic value for accessing a particular array in Vue.js?

I've been struggling to find a solution for this problem. I have developed a function that is triggered when a component is clicked using v-on:click. My goal is to pass a value into the function to access a specific array from backend data.

Within the component, the function looks like this:

<v-card
  @click="getContent('topSellers')"
 >

The 'topSellers' value is then passed as an "id" parameter in the function to target the desired array:

getContent(id) {
      this.accordion = this.data.id;
      console.log("data", id);
    }

Currently, this.data.topSellers is functioning correctly. However, since the id is treated as a string, the method is not working properly. I am unsure of how to resolve this issue. Any assistance would be highly appreciated!

javascriptarraysvue.jsdynamic-values

Answer №1

Make sure to use this.data[id] instead of this.data.id.

For more information on property accessors, check out MDN's guide.

When you use data[id], it accesses the property in data with the value of id, such as topSellers. Therefore, data.topSellers is the same as data["topSellers"]

Answer №2

In programming, the use of [] enables you to retrieve objects using variables.

It is crucial to properly manage exceptions as the variable being passed may not be secure.

getContent(id) {
  const accordion = this.data[id] || null;
  if(accordion){
    console.log("data", accordion);
    this.accordion = accordion;
  }
}

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

ForEach fails to refresh the primary array

I am currently working on extending the values of each item in an array. My array consists of objects with x, y, and z fields. I aim to append more items to each object within the array using information obtained from a http.get call's response. The ...

javascriptnode.js

A guide to reversing video playback with react-native-video

I am looking to create a unique video experience where the video plays for 15 seconds in a forward order, then automatically switches to playing in reverse. In my code snippet below, I am fetching a local video file and using react-native-video to displa ...

javascriptandroidnode.jsreact-nativeecmascript-6

Unexpected Behavior when Passing @Input() Data Between Parent and Child Components in Angular 2 Application

I am currently in the process of abstracting out a tabular-data display to transform it into a child component that can be loaded into different parent components. The main aim behind this transformation is to ensure that the overall application remains "d ...

javascriptangularparent-child

Incorporate details and summary elements for collapsible inline content

Exploring a solution to the following challenge: Looking for a method to create collapsible buttons (or similar objects) that: can be displayed in the same line reveal their content between the current and next line when clicked are re ...

javascripthtmlcss

Tips for grouping data by multiple fields in mongodb

Is there a way to aggregate data by two fields and have the grouping done in a nested manner? The current method I use for grouping is as follows: var query = [ { '$group': { '_id': { 'employee': '$employee&a ...

javascriptnode.jsmongodbmongodb-queryaggregation-framework

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

javascripthtmlcssscrollbootstrap-4

Switching between the open and close buttons within a Vue component

Just starting out with Vue and need some guidance on implementing a specific feature. I want an open button (icon) in the navigation bar. Clicking it should change it to a close icon and load a new template within the same page. Clicking the close icon sh ...

vue.jsvuetify.js

`Node.js encountering issues with undefined JSON Array values`

I am facing an issue while trying to extract an array of strings from a JSON file. Although I am able to successfully load the JSON array, I am encountering difficulties in accessing the actual data within it. The structure of my JSON file is as follows: ...

arraysnode.jsjson

Can PDF-VIEWER be interacted with using Selenium or other similar tools?

Lately, this problem has been consuming my thoughts. I've scoured the internet for days without finding any answers. I'm wondering if there is a way to interact with the pdf-viewer extension in a Chrome browser. Specifically, I want to click on ...

javascriptpythonseleniumselenium-webdriverselenium-chromedriver

I need a regex pattern that will only match numeric values

Looking for a regular expression that can extract only numbers from a string. Specifically, numbers not preceded by a character. For example: "(a/(b1/8))*100 In this case, we do not want to include b1. We are interested in retrieving numbers like 8, 100, ...

javascriptasp.netregex

Displaying Spinner and Component Simultaneously in React when State Changes with useEffect

Incorporating conditional rendering to display the spinner during the initial API call is crucial. Additionally, when the date changes in the dependency array of the useEffect, it triggers another API call. Question: If the data retrieval process is inco ...

javascriptreactjsreact-reduxreact-router

Create an XML document using the DOM structure, but exclude specific elements in the process

Having some HTML that needs to be converted into an XML document, I am struggling to skip certain elements and focus only on the divs. I wrote a simple DOM traversal function to achieve this, but it seems to be stuck in an infinite loop. (More details belo ...

javascripthtmlxmldomdom-traversal

Navigating between pages in ReactJS using Material UI can be made simple and efficient with the

While working on creating a drawer for my dashboard using material-Ui, I encountered an issue with navigating between pages Let me start by sharing my app.js file where the product route is defined: <Provider store={store}> <BrowserRouter> ...

javascriptreactjsmaterial-uimaterial-designmern

Fire css animations only upon the addition of a specific class

By clicking on button 2, you will witness the animation effect in action. But, if another function alters the button, like checking a checkbox to show or hide it, the animation triggers again as if the button were clicked once more. How can I prevent the ...

javascriptjquery

Transform an array containing subarrays into an instance of stdClass

I am working with an array that has a sub-array: $test = array("hello" => "world", "object" => array("bye" => "world")); My goal is to convert it into an object: $obj = (object) $test; After conversion, the parent array becomes an object, but ...

phparraysstdclass

Effortlessly generate various socket.io events within a node.js environment

Seeking advice on optimizing and following the DRY principle. My node server is functioning correctly, but I want to streamline the code for future developers. Currently, I have a series of events being set up in this manner: var debug = true; io.sock ...

javascriptnode.jssocket.io

Is there a way to eliminate an item from a Redux/React array state?

I am having trouble removing an object from an array onClick when I click on the delete button. I have written some code in my redux and react but it is not functioning as expected! Reducers import { ActionsTypes } from "../Constant/ActionsTypes" ...

javascriptreactjsredux

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

I've been attempting to transform a collection of 4 divs in HTML into an array, but all my efforts seem to lead to the array becoming void. <div class="container"> <div class="shape" id="one"></div> <div class="sh ...

javascripthtmlarraysdom

Using Bootstrap 5 to display a modal using JavaScript

Creating a sleek gallery using bootstrap 5, and curious about how to activate a bootstrap modal without including "data-bs-..." in the HTML (to prevent repeating those data- attributes multiple times). I have successfully written a functioning JavaScript ...

javascriptfunctionbootstrap-modalshowbootstrap-5

Error encountered in NodeJS after refreshing the node server

I am currently in the process of developing a web application using Node.js, Express framework, and EJS templates. Below is the code snippet for my server setup: const express = require('express'); const app = express(); const PORT = process.en ...

javascriptnode.jsexpressnpmejs