在 Vue.js 中给定 N 个数组创建 N 个表（组件）

Posted 2023-02-16

【中文标题】在 Vue.js 中给定 N 个数组创建 N 个表（组件）

【英文标题】：Creating N tables (components) given N arrays in Vue.js

【发布时间】：2022-01-05 21:31:55

【问题描述】：

我的代码现在的方式是，我的数据中有 N 个数组。每个数组包含 M 个学生的信息。目标是使用 (vue-draggable) 创建 N 个表，并在每个表中创建 M 个可拖动的学生，以便它们都可以移动，同时更新每个数组。 （n in 2 只是一个填充符，稍后将在 listNumber 中使用 n）

<template>
  <div class="row">
    
    <div class="col-3" v-for="n in 2"  :key="n">
      <h3>Draggable n</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.name"
        >
           element.name   index 
        </div>
      </draggable>
    </div>

  </div>

</template>

<script>
import draggable from "vuedraggable";
let id = 1;
export default 
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: 
    draggable,
    list1:[],
  ,
  data() 
    return 
      list1: [
         name: "John", id: 1 ,
         name: "Joao", id: 2 ,
         name: "Jean", id: 3 ,
         name: "Gerard", id: 4 
      ],
      list2: [
         name: "Juan", id: 5 ,
         name: "Edgard", id: 6 ,
         name: "Johnson", id: 7 
      ],
      listNumber:3,
    
    ;
  ,
  methods: 
    add: function() 
      this.list.push( name: "Juan" );
    ,
    replace: function() 
      this.list = [ name: "Edgard" ];
    ,
    clone: function(el) 
      return 
        name: el.name + " cloned"
      ;
    ,

  
;
</script>

现在的方式，我的代码返回2个表，可拖动的1，可拖动的2，但是，每个表的内容只是从list1中提取的。无论如何 Draggable 1 有来自 list1 的项目，而 Draggable 2 有来自 list2 的项目？

【参考方案1】：

可能最简单的方法是将数据重构为一个对象，键名是您想要的变量 - 即：

people:   
  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 
  ],

然后在你的模板中你可以引用对象属性：

<div class="col-3" v-for="n in 2"  :key="n">
      <h3>Draggable n</h3>
      <draggable class="list-group" :list="people[n]" group="people" @change="log">
      <div
          class="list-group-item"
          v-for="(element, index) in people[n]"
          :key="element.name"
        >
           element.name   index 
        </div>
      </draggable>
    </div>
  </div>

【讨论】：

非常感谢，我认为这会奏效。当我把这个东西拿到我想要它从数据库中提取数据的地方时，我会通知你！