VueJs getting error from Dynamically array passing as string but works fine if the array is hard cod-CodePudding

I am trying to pass the array to the Draggable Vue component. The array generating dynamically from the inside loop but getting the error Invalid prop: type check failed for prop "list". Expected Array, got String with value "arrOne" while assigning the array to :list

array rendering and assigning script:

     <draggable
      class="list-group mttr_kt-block"
     :list="'arr' item.code"  //here output of item.code is **One** , final array will **arrOne**
     group="tasks">

     </draggable>

The above codes throwing the exception and not working as expected but if I assign hard coded array as following its working fine:

     <draggable
      class="list-group mttr_kt-block"
     :list="arrOne"  //this hard coded **arrOne**
     group="tasks">

     </draggable>

Note: the array arrOne already declared inside Vue scripts, no issue with declartion.

Thanks in advance for your help. Please please let me know if additional information is needed from my side.

CodePudding user response：

I assume arrOne and other arrays are defined in data(). If so, you can use these:

<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];
   }
},