vue3中vue.draggable slot(插槽) 在jsx中的使用(Error: draggable element must have an item slot)


在vue3 中 使用 vuedraggable 拖拽組件的時候   遇到的問題記錄如下:

1、在template中使用拖拽插件  按照官網的寫法 並沒有問題 如下:

  item為具名插槽

<draggable v-model="myArray" item-key="id">
  <template #item="{element}">
    <div> {{element.name}} </div>
  </template>
</draggable>

2、在JSX中使用拖拽插件  遇到了一個問題 報錯 Error: draggable element must have an item slot

 主要是item插槽的寫法需要注意    寫法如下:

    const slots = {
      item: ({element, index}) => {
          return <div> {{element.name}} </div>
      }
    }
    render(h) {
      return <draggable v-model="myArray" item-key="id" v-slots={ slots }></draggable>
    }

 


  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM