Vue中v-for变量可以设置为动态吗？字符串拼接绑定为什么不生效？

1. Vue的v-bind（即:前缀）和内置指令的表达式中，直接拼接得到的是字符串字面量，而非Vue实例上的对应变量引用。你写的:list="list${n}"最终传给draggable组件的是"list1"、"list2"这类字符串，不是data中定义的数组对象，无法满足draggable的list属性要求。
2. v-for指令要求遍历源必须是数组、对象等可迭代类型，传入拼接得到的字符串要么会遍历单个字符，要么直接报错，无法实现遍历目标数组的效果。
3. 你提供的完整代码本身存在语法错误：
   • data函数的return内部结构错误，多了多余的大括号分割list1和list2
   • components配置项中错误写入了list:[]，components仅用于注册组件，不能存放自定义变量
   • key绑定用了可能重复的name字段，建议改用唯一的id字段

方案1：动态读取实例属性（快速修复） #

模板中通过$data对象的方括号语法动态读取对应数组，修改后的模板代码如下：

<div class="col-3" v-for="n in listNumber"  :key="n">
  <h3>Table {{n}}</h3>
  <draggable class="list-group" :list="$data[`list${n}`]" group="people" @change="log">
    <div
      class="list-group-item"
      v-for="(element, index) in $data[`list${n}`]"
      :key="element.id"
    >
      {{ element.name }} {{ index }}
    </div>
  </draggable>
</div>

方案2：重构数据结构（更推荐，可维护性更高） #

不要将多个列表散成list1、list2单独定义，统一放到一个父级对象中管理，修改后的data配置如下：

data() {
  return {
    lists: {
      1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    },
    listNumber: 3,
  }
},

对应的模板直接通过下标取值即可，写法更简洁：

<draggable class="list-group" :list="lists[n]" group="people" @change="log">
  <div
    class="list-group-item"
    v-for="(element, index) in lists[n]"
    :key="element.id"
  >
    {{ element.name }} {{ index }}
  </div>
</draggable>

内容的提问来源于stack exchange，提问作者Goody Hi