What is the method for transforming a string containing the name of an array into a format that can be displayed in a Vue.js template?

<b-card v-for='callType in callTypes' no-body class="mb-1">
    <b-table striped hover :items="{{callType.lineType}}">
    </b-table>
</b-card>

When each callType is the name of an array.

callTypes: [mainLine, etc]
mainLine:  [firstline: number, etc etc]

Error: vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "items". Expected Array, Function, got String with value "mainLine".

Answer №1

To access the array declared in data(), you can use the following method:

<b-card v-for='callType in callTypes' no-body class="mb-1">
    <b-table striped hover :items="$data[callType.lineType]">
    </b-table>
</b-card>

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

Displaying the overall count for a bar chart within the tooltip title of a c3js visualization

I have a bar chart that looks similar to the one presented in this example. There are two specific features I am interested in adding to this bar chart: Instead of numeric values, I would like the tooltip title to show the sum of the counts represente ...

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it. Here is the code snippet that I'm currently using: function followIt(e) ...

Is there a way to access data dynamically during rendering and display the outcome?

Upon rendering the object below, I am able to implement something similar to: <div v-for="(card, groupIndex) in cards" v-bind:key="card.id"> <div> {{cards[groupIndex].group.length}} </div> </div> This code snippet provides a cou ...

What are some ways to implement a pre-execution step, such as an interceptor, before Nextjs runs getStatic

When working with getStaticProps and getServerSideProps in Next.js, I need to intercept and add common header properties to all request calls that are executed server-side. axios.interceptors.request.use(function (config) { // Perform actions before ...

Tips on causing a forEach loop to pause for a regex substitution to occur

I have a project in progress for an email web app where I am working on replacing certain keywords (first name, last name, email) with the actual properties of the user. As of now, I am going through a list of recipients and modifying the email content to ...

Discover the process of incorporating two distinct component structures within a single React application

In my React app, I am trying to implement a different navbar for routes that start with "admin". For example: Normal Page: <NormalNavbar/> <NormalHeader/> <NormalBody/> <NormalFooter/> But if it's an admin route, then I want: ...

CryptoJS consistently produces identical hash values for distinct files

Utilizing CryptoJS to generate a hash value for uploaded files has presented me with a challenge. Despite my efforts, all files I upload seem to produce identical hash values. It appears that the issue lies within my "onFileChange" function, but pinpointin ...

JavaScript failing to load following PHP header() redirect

I've set up a page that allows users to sign in by filling out a basic form, which then sends the data to a separate PHP script for validation. After the validation process is complete, the PHP script uses the header() function to redirect the user to ...

Organizing month and year in angularjs: A step-by-step guide

I have a table with a column for month and year. I need to sort the dates by year. Can someone please help me with this? You can view the code in the provided fiddle. In my case, the date format is "MMMM yyyy". For example, if I have "August 2016", "Septe ...

Performing an Ajax request to the server and then sending the retrieved data back to Charts.js

After extensively researching ajax, php, and related topics, I'm facing a challenge. I want to take an array retrieved from my database and integrate it into a chart.js script. The data retrieval seems fine as per Firebug inspection, but the issue ari ...

Obtain an Element Using Puppeteer

Currently grappling with a sensitive issue concerning puppeteer. The HTML structure in question is as follows: <tbody> <tr rel="0" class="disabled" id="user6335934" class="odd"> ...

Creating a loop with v-for in Django, explained

I'm currently developing a webpage using Django, incorporating Bootstrap Vue and Vuex as the store. However, I've encountered difficulties when trying to use a v-for loop to iterate over data in my Vue instance within a specific section of my HTM ...

JavaScript : Retrieve attributes from a JSON object

Situation : I have a JSON object with multiple properties and need to send only selected properties as a JSON string to the server. Approach : To exclude certain properties from the JSON string, I utilized the Object.defineProperty() method to set enumera ...

The optional attribute feature in Angular directives

Looking for a solution: angular .module('test') .directive('multiButton', function () { return { restrict: 'E', replace: true, scope: { disabled: '@' }, template: ' ...

Fetching JSON data from a Node.js server and displaying it in an Angular 6 application

Here is the code snippet from my app.js: app.get('/post', (req,res) =>{ let data = [{ userId: 10, id: 98, title: 'laboriosam dolor voluptates', body: 'doloremque ex facilis sit sint culpa{ userId: 10' ...

Switching the displayed image depending on the JSON data received

As a beginner in javascript and jQuery, I am working on displaying JSON results in the browser. My goal is to generate dynamic HTML by incorporating the JSON data. Below is an example of the JSON structure: [{"JobName":"JobDoSomething","JobStatus":2,"JobS ...

React Native - The size of the placeholder dictates the height of a multiline input box

Issue: I am facing a problem with my text input. The placeholder can hold a maximum of 2000 characters, but when the user starts typing, the height of the text input does not automatically shrink back down. It seems like the height of the multiline text ...

A Kendo editor necessitates the use of Kendo JavaScript specifically designed for Angular

Can someone provide guidance on the necessary Kendo libraries for implementing the Kendo editor in AngularJS? The tutorial site suggests that "kendo.all.min.js" is required, but I am hesitant to use it due to its resource-heavy nature. Any assistance wou ...

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

Using an image for the axis in Wijmo BarGraph

I am currently working with Wijmo barcharts and attempting to create a graph that uses images instead of labels on the x-axis. The code I have at the moment displays the image source as a string rather than displaying the actual image. Does anyone know ho ...