javascript - VueJs 从作为字符串传递的动态数组中获取错误，但如果数组是硬编码的，则工作正常

Question

我正在尝试将数组传递给 Draggable Vue 组件。数组从内部循环动态生成，但收到错误 Invalid prop: type check failed for prop "list"。 预期的数组，在将数组分配给：list时得到值为“arrOne”的字符串

数组渲染和分配脚本：

     <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> 

上面的代码抛出异常并且没有按预期工作，但是如果我将硬编码数组分配为以下工作正常：

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

     </draggable>  

注意：数组arrOne已经在 Vue 脚本中声明，声明没有问题。

在此先感谢您的帮助。如果我需要更多信息，请告诉我。

标签： javascriptarraysvue.jsvuejs2vue-component

Answer 1

我假设arrOne其他数组是在data(). 如果是这样，您可以使用这些：

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