可拖中的Vue可拖及如何获取父元素

Question

我使用的是vue3和vue-draggable。

我有一个数组：

brand: [
{ id: 0, order: 0 ,name: "Adidas", content:[
        {id: 0, order: 0, name:"UK Shoe Size"},
        {id: 1, order: 1, name:"US Shoe Size"},
    ]},
{ id: 1, order: 1 ,name: "Fila",  content: [
        {id: 0, order: 0, name:"US Shoe Size"}
    ]},
{ id: 2, order: 2 ,name: "K-Swiss" , content: [
        {id: 0, order: 0, name:"UK Shoe Size"},
        {id: 1, order: 1, name:"US Shoe Size"},
        {id: 2, order: 2, name:"Eur Shoe Size"}
    ]},]

我用两个可拖的组件来展示它。查看页面

它的工作是循环品牌，和brand.content。但是我无法获得子brand.name或brand.id (在brand.content中是可拖动的)，就像在阿迪达斯中拖放(brand.id = 0)一样，我无法知道我更改了哪些内容。我无法从可拖动的子程序中访问brand.id。

我试过用v-bind，但不起作用。

有什么建议吗？谢谢你的帮助！

以下是简化的代码：

<draggable :list="brand" :disabled="!enabled" item-key="name" class="list-group" ghost-class="ghost"
  v-bind="dragOptions" handle=".handle" :group="{ name: 'brand' }" @start="dragging = true" @end="dragging = false">

  <template #item="{ element, index }">
    <div class="list-group-item" :class="{'not-draggable' : !enabled}">
      <div class="row handle drag-object">
        ID: {{ element.id }} , Name: {{ element.name }}

        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="'#target'+element.id"
          aria-expanded="false" aria-controls="collapseExample">
          Details
        </button>

        <div class="row">
          <div class="collapse" :id="'target'+element.id" :class="{'show' : showAll}">
            <div class="card card-body size-classes">

              <!--    v-bind:mainType not working    -->
              <draggable v-bind:mainType="element.name" :list="element.content" :disabled="!enabled2"
                item-key="size-class" class="list-group" ghost-class="ghost" v-bind="dragOptions" handle=".handle"
                :group="{ name: 'size-class'+element.name}" @start="dragging2 = true" @end="dragging2 = false">

                <!--   v-bind:mainType not working    -->
                <template #item="{ element, index, mainType }">
                  <div class="list-group-item size-classes-bar" :class="{'not-draggable' : !enabled2}">
                    <div class="row handle drag-object">

                      <!--  cannot get the mainType   -->
                      inform: {{ mainType }} ,ID: {{ element.id }} , Name: {{ element.name }}

                      <button class="btn btn-primary" type="button" data-bs-toggle="collapse"
                        :data-bs-target="'#target2'+element.id" aria-expanded="false" aria-controls="collapseExample">
                        Details
                      </button>
                    </div>

                    <div class="collapse" :id="'target2'+element.id" :class="{'show' : showAll2}">
                      <div class="card card-body size-classes-details">
                        <h1>Something ..</h1>
                      </div>
                    </div>

                  </div>
                </template>
              </draggable>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</draggable>

Answer 1

简单解决方案:在content范围内，您可以访问两个名为element的变量。他们互相跟踪，所以他们选择了“最接近”的一个。

只需在析构中重命名它，就可以引用这两个变量：

<draggable>
  <template #item="{ element: brand, brandIndex }"> <!-- Rename element to brand -->
    ID: {{ brand.id }} , Name: {{ brand.name }}
    <draggable>
      <template #item="{ element: content, index: contentIndex }"> <!-- Rename element to content -->
        {{ brand.id }} {{ content.id }} <!-- You have access to both variables -->
      </template>
    </draggable>
  </template>
</draggable>

一个更好的解决方案是通过创建子组件来简化您的组件，并将品牌/内容作为一个支柱：

<!-- Parent component -->
<draggable>
  <template #item="{ element, index }">
    <brand-component :brand="element" :index="index />
  </template>
</draggable>

<!-- Brand component -->
<draggable>
  <template #item="{ element, index }">
     <sub-component :brand="brand" :content="element" :index="index" />
  </template>
</draggable>


props: {
  element: Object,
  index: Number,
}

<!-- Brand Content component -->
<button>Whatever</button>

props: {
  brand: Object,
  element: Object,
  index: Number,
}

备注：

• mainType道具似乎不存在于draggable组件上。
• 道具应该在模板中用kebab-case编写。