When using VueJs, an error occurs when attempting to pass a dynamically generated array as a string, but there are no issues when the

I'm currently attempting to pass an array to the Draggable Vue component. The array is being generated dynamically from an inside loop, but I keep encountering the error message: Invalid prop: type check failed for prop "list". Expected Array, but received String with value "arrOne" when trying to assign the array to :list

The script for rendering and assigning the array is as follows:

     <draggable
      class="list-group mttr_kt-block"
     :list="'arr'+item.code"  //where the output of item.code is **One**, resulting in the final array being **arrOne**
     group="tasks">

     </draggable> 

The above code is causing an exception and isn't functioning as expected. However, if I manually assign a hard-coded array like so, it works fine:

     <draggable
      class="list-group mttr_kt-block"
     :list="arrOne"  //this is the hard-coded **arrOne**
     group="tasks"gt;

     </draggable>  

It's important to note that the array arrOne has already been declared within the Vue scripts, so there shouldn't be any issues with declaration.

Thank you in advance for your assistance. Please let me know if you require any additional information from my end.

Answer №1

In the context where arrOne and other arrays are already declared in the function data(), you can make use of the following code snippets:

<draggable
   class="list-group mttr_kt-block"
   :list="getArray(item.code)"
   group="tasks">
</draggable>
data() {
   return {
      arrOne: [1, 2],
      arrTwo: [3, 4],
   };
},
methods: {
   getArray(name){
      return this.$data['arr' + name];
   }
},

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 include the parameter set in the interceptor when making a post request?

-> Initially, I attempt to handle this scenario in the axios request interceptor; if the parameter is uber, then utilize a token. If the parameter is not uber, then do not use a token. -> Afterward, how can I specify uber as a parameter in the custo ...

Determine whether a given string is a valid URL and contains content

Is there a way to ensure that one of the input fields is not empty and that the #urlink follows the format of a URL before executing this function in JavaScript? $scope.favUrls.$add I'm uncertain about how to approach this. html <input type="te ...

What steps do I need to take to ensure that this Regex pattern only recognizes percentages?

I am attempting to create a specific scenario where I can restrict my string to three digits, followed by a dot and two optional digits after the dot. For example: 100.00 1 10.56 31.5 I've developed a regex pattern that allows me to filter out any ...

NuxtJS is unable to load multiple CSS sheets that contain variables

Currently in the process of creating a blog with NuxtJS. You can find my repository here. Additionally, I have raised this issue on the Nuxt repository as well, which you can view here. The main issue at hand revolves around loading style sheets in my con ...

Using Vue-cookies in conjunction with Firebase and Heroku, not being utilized

I have successfully deployed a Vue.js project on Firebase and a Node-Express app on Heroku. Now, I am attempting to send cookies along with each request to the server using Axios. Cookies are being set using vue-cookies with attributes of sameSite: none an ...

The variable was not properly sent to the backing bean

I am experiencing an issue with a certain piece of code. I have a variable called fieldToStore that is defined. When I alert it or check its value in the firebug console, everything seems fine. However, when I pass it to myBean, it always ends up being und ...

Unable to display Bootstrap Glyphicons within a div container

I've created the following code snippet: function acceptButtonClick(th) { var id = $(th).attr('data-id'); $(th).parent().parent().find('div.Declined').attr('class', "Approved"); $(th).parent().parent().find( ...

How can one implement a matrix transformation and establish it as the default state in ThreeJS?

I am working with a group of THREE.Mesh objects and my objective is to apply a rotation using the code snippet group.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2) );. Afterwards, I want to set this resulting matrix as the default state for t ...

Tips for leveraging async and await within actions on google and API integration

Currently, I am developing an Actions on Google project that utilizes an API. To handle the API calls, I am using request promise for implementation. Upon testing the API call, I observed that it takes approximately 0.5 seconds to retrieve the data. Theref ...

The CSS styles are failing to be applied to the submit button once it has been

When I have a form with a submit button that triggers a form submission on a PHP page, I want to have an onclick event on the submit button that changes its opacity using JavaScript. The issue I am facing is that after clicking the submit button, the opaci ...

POST request returned a null response in the xhr.responseText

Check out the structure of my JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("POST", "http://myajaxurl.com/lyric", true); var data = "lyric"; xhr.onreadystatechange = function() { if (xhr.readyState == 4) { console.log(xhr.responseText); ...

I'm a bit puzzled by a particular function that was explained in a section of my coding bootcamp module

I'm currently delving into express.js and trying to understand the inner workings of a function that retrieves detailed information about animals based on a query. This function is designed to search for animals by name and return all relevant data, b ...

NodeJS and Express server is having trouble accessing the linked JavaScript file(s) from the HTML document

I'm facing a challenge with my web hosting server on AWS while using express.js. I have encountered the following error: root@ip(censored):/home/ubuntu/(censored)# /home/ubuntu/(censored)/routes/index.js:15 $(document).ready(function() { ^ Referen ...

Issue with OBJLoader showing a blank screen

Does anyone have experience with rendering OBJ files using three.js? I'm having trouble getting them to display on the screen and would appreciate any help or advice. The strange thing is that a simple cube renders perfectly in my project. For those ...

What is the best way to iterate through states within an array using React?

Can someone help me create a button that can cycle through different states in the given array? I want the button to change State_1 to State_2, State_2 to State_3, and then back to State_1 for each object. I'm struggling to figure out how to cycle thr ...

What is the best way to get a string as a return value from an async function that uses the request API

I'm currently working on a project that involves printing the HTML code source as a string using the request API. I've created a function to fetch the data as a string, but when I try to print the output, it returns undefined. I'm struggling ...

Managing Numerous Ajax Calls

Dealing with Multiple Ajax Requests I have implemented several Like Buttons on a single PHP Page, which trigger the same Ajax function when clicked to update the corresponding text from Like to Unlike. The current code works well for individual Like Butt ...

Generating text upon clicking by utilizing vue apex charts dataPointIndex

Is there a way to populate a text area on click from an Apex chart? The code pen provided below demonstrates clicking on the bar and generating an alert with the value from the chart. Instead of displaying this value in an alert, I am looking to place it o ...

Tricking ASP.NET and IE8 with a Pseudo Asynchronous File Upload Method

Just a heads up, I have to cater to IE8 for a few different reasons. I've come across various methods that involve placing a file upload control inside a form element, and then using an iframe to mimic an AJAX file upload (like this one at How to make ...

Design a customizable input field to collect HTML/JS tags

I'm looking to incorporate a similar design element on my website. Can anyone offer me some guidance? Check out the image here ...