Vue2中如何为render函数创建的draggable组件添加v-model？

问题分析 #

你当前的代码存在几个关键问题导致v-model逻辑失效：

1. 属性绑定位置错误：draggable组件的核心配置（list、ghostClass、animation等）属于组件props，不是普通HTML属性，不能放在attrs字段下。
2. input事件取值错误：vue.draggable触发的input事件参数直接是更新后的完整列表数组，而非event.target.value，你当前的取值逻辑完全错误。
3. 缺少核心数据源绑定：没有将你的业务数组this.data.list传递给draggable的list属性，这是拖拽后数据同步的基础。

修正后的代码 #

const draggableItem = h('draggable', {
  class: '',
  props: { // 所有draggable组件的配置项都放在props字段中
    list: this.data.list, // 绑定核心数据源，对应v-model的绑定值
    group: 'people',
    ghostClass: 'ghost',
    animation: 200,
    handle: '.drag-widget'
  },      
  on: {
    input: (newList) => { // 直接接收拖拽更新后的列表数组
      console.log('on input', newList);
      this.data.list = [...newList]; // 浅拷贝数组触发Vue响应式更新
      this.$emit('update:list', newList); // 若作为子组件，向外传递更新事件
    },        
    end: () => {
      console.log('drag on end');
      this.handleMoveEnd();
    },
    add: (event) => {
      console.log('drag on add', this.data.list);     
      console.log(event);               
      this.handleWidgetAdd(event);
    }       
  }
}, [transitionGroupItem]);

关键说明 #

• props绑定list：list是vue.draggable实现数据同步的核心属性，必须将你的业务数组传递给它，拖拽操作后组件会自动更新数组并触发input事件。
• input事件处理：事件参数就是最新的列表数组，直接赋值给this.data.list即可，通过浅拷贝（[...newList]）确保Vue响应式系统能检测到数组变化。
• v-model的本质：模板中的v-model="data.list"等价于:list="data.list" @input="data.list = $event"，在render函数中按此逻辑实现，就能达到和v-model完全一致的效果。

内容的提问来源于stack exchange，提问作者Roman Gnatyshen