在Vue中可以改变元素的父元素吗?

ttp71kqs  于 2023-10-23  发布在  Vue.js
关注(0)|答案(1)|浏览(151)
<div id="panels-window" class="block-window" v-if="showPanelsWindow">
        <div v-if="showPanels" id="panels">
            <div id="panel-sorted" class="block-window panel">
                <call-item
                    v-for="(call, index) in callsSorted"
                    v-bind:key="call.id"
                    v-bind:call="call"
                    v-bind:sorted=true
                    v-bind:order="{order: index}"
                    v-on:update-calls="updateCalls"
                ></call-item>
            </div>
        </div>
    </div>
    <div id="showOperation"></div>

是否可以将一个选定的call-item元素移动到showOperation元素中?也就是说,我想从列表中删除一个元素并将其插入另一个元素。是否可以使用Vue实现这一点?

4bbkushb

4bbkushb1#

这是完全可能的-你将需要两个元素列表。第一个列表将呈现在面板窗口中,而第二个元素列表将呈现在所示的操作容器中。大概是这样的:

<template>
  <div id="panels-window" class="block-window" v-if="showPanelsWindow">
    <div v-if="showPanels" id="panels">
      <div id="panel-sorted" class="block-window panel">
        <call-item
            v-for="(call, index) in callsSorted"
            v-bind:key="call.id"
            v-bind:call="call"
            v-bind:sorted=true
            v-bind:order="{order: index}"
            v-on:update-calls="updateCalls"
        />
      </div>
    </div>
  </div>
  
  <div id="showOperation">
    <call-item
        v-for="(call, index) in operationsShown"
        v-bind:key="call.id"
        v-bind:call="call"
        v-bind:sorted=true
        v-bind:order="{order: index}"
        v-on:update-calls="updateCalls"
    />
  </div>
</template>

<script>
export default
{
  name: 'MyCustomComponent',
  data()
  {
    return {
      callsSorted: [],
      operationsShown: [],
    };
  },
  methods:
  {
    moveCallToOperation(callIndex)
    {
      this.operationsShown.push(this.callsSorted.splice(callIndex, 1)[0]);
    },
  }
};
</script>

相关问题