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