vuedraggable拖拽点击事件失效问题

1,007 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

官网

Vue.Draggable

el-collapse 折叠面板拖拽问题

html

<draggable tag="el-collapse" :list="list" :component-data="getComponentData()">
    <el-collapse-item v-for="e in list" :title="e.title" :name="e.name" :key="e.name">
        <div>{{e.description}}</div>
     </el-collapse-item>
</draggable>

js

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }

componentData

该道具用于将附加信息传递给标记道具声明的子组件。 价值: props:要传递给子组件的道具 attrs:要传递给子组件的 attrs on:子组件中要订阅的事件