Vuedraggable - 将项目拖入对象内的数组

问题描述

所以我有点卡住了，我目前正在构建下图中的布局。我想要完成的是，当我从左列拖动一个项目时，它会被添加到右侧的数组中。无法让 Codepen 工作，希望这已经足够了。

我的结构是这样的。除非它真的阻碍了我，否则我目前无法真正改变它。

//Left side
mockData: [
        {
          type: "Gender",value: ["Man","Kvinna"]
        },{
          type: "Material1",value: ["Bomull","Läder"]
        }
      ],// Right side
      ondropMock: [
        {
          type: "Gender",value: [
            {
              Male: ["Alien"]
            },{
              Female: []
            }
          ]
        },value: [
            {
              Cotton: []
            },{
              Leather: []
            }
          ]
        }
      ],

我一直在胡闹，最后得到的结果不是将项目放在右侧数组中，而是将项目添加到与数组相同的级别。这是我到目前为止的代码。

  <div class="d-flex">
    <div class="mr-4">
      <div v-for="element in mockData" :key="element.type">
        <h4>{{ element.type }}</h4>

        <Draggable @change="log" group="items" v-model="element.value">
          <div v-for="el in filtered(element.type)" :key="el">
            {{ el }}
          </div>
        </Draggable>
      </div>
    </div>
    <div class="ml-4">
      <div v-for="element in ondropMock" :key="element.type">
        <h4>{{ element.type }}</h4>

        <span v-for="(value,i) in element.value" :key="value[i]">
          <div v-for="(arr,i) in value" :key="arr + i">
            <Draggable @change="log" group="items">
              {{ arr }}
            </Draggable>
          </div>
        </span>
      </div>
    </div>
  </div>

这是我目前得到的方法。

methods: {
    filtered(type) {
      const arr = this.mockData.filter(item => item.type === type);
      return arr[0].value;
    },filteredOndrop(type) {
      const arr = this.ondropMock.filter(item => item.type === type);
      return arr[0].value;
    },log: function(evt) {
      window.console.log(evt);
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）