Vue动态拼接数组名传参给Draggable组件list属性报错如何解决

错误根因 #

你拼接出的'arr'+item.code只是普通字符串，不会被Vue自动解析为当前作用域下的同名数组变量，因此传给Draggable组件的是字符串"arrOne"，不符合组件对list属性要求的数组类型，触发类型校验失败。

解决方案1（推荐：兼容性高、可维护性强） #

把所有需要动态调用的数组统一放到映射对象中管理，通过key值动态获取对应数组：

1. 脚本部分新增映射对象：
   选项式API示例：

data() {
  return {
    arrOne: [/* 数组原有内容 */],
    arrTwo: [/* 数组原有内容 */],
    // 新增数组映射对象
    arrMap: {
      One: this.arrOne,
      Two: this.arrTwo
    }
  }
}

组合式API示例：

import { ref, reactive } from 'vue'
const arrOne = ref([/* 数组原有内容 */])
const arrTwo = ref([/* 数组原有内容 */])
// 新增数组映射对象
const arrMap = reactive({
  One: arrOne,
  Two: arrTwo
})

2. 模板部分修改为通过key取值：

<draggable
  class="list-group mttr_kt-block"
  :list="arrMap[item.code]"
  group="tasks"
>
</draggable>

解决方案2（临时可用：仅适用于选项式API） #

如果不想调整数据结构，可以直接通过Vue实例的$data属性动态获取data中声明的变量：

<draggable
  class="list-group mttr_kt-block"
  :list="$data['arr' + item.code]"
  group="tasks"
>
</draggable>

注意：该方案不支持Vue3组合式API，且动态变量较多时可维护性差，仅适合临时快速修复场景。

内容的提问来源于stack exchange，提问作者Md Mahabubur Rahman