Vue 渲染 function 可拖动。 如何添加 v-model

Question

I cannot find how to add v-model to draggable component in Vue2. found some example in documentation, but it doesn't work. I tried different variants like adding of list property to component, but it does not work.

 const draggableItem = h('draggable', {
      class: '',
      attrs: { 
          'group':'people',
          ghostClass: 'ghost',
          animation: 200,
          handle: '.drag-widget'
        },      
      on: {
        input: (event) => {
          console.log('on input');
          this.data.list = event.target.value
          this.$emit('data.list', event.target.value)
        },        
        end: () => {
          console.log('drag on end');
          this.handleMoveEnd()
          },
        add: (event) => {
          console.log('drag on add', this.data.list);     
          console.log(event.dataTransfer);               
          this.handleWidgetAdd(event)
          }       
        }
      },
      [transitionGroupItem]
    );

Could somebody help me with it?

Tried to add to attributes list property like list: this.data.list, but it also doesn't work

Answer 1

V-model is basically combination of reactive prop :value and input . Value prop for initializing it and input event to update parent's version of it.

Here is very good guide - Adding V-model to custom vue component

On being added to the list, it should emit('input',data.list) and also there assign to a data value to avoid mutating the prop.