vuedraggable由vue2版本升级vue3版本遇到的问题

vuedraggable由vue2版本升级vue3版本后,可能会遇到以下几种bug:

1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’):这个一般是因为插件使用语法有问题,vue3版本的插件使用时,v-for不能
自己手写,由插件提供的语法实现循环:

 <draggable v-model="configDataArr">
      <template #item="{element,index}">
      </template>
  </draggable>

以上是插件最简几行代码,这四行不能缺失。

2、报错 draggable element must have an item slot:这报错也是因为没有写item插槽,按照上面的语法写了插槽后,这报错就能解决。
3、报错Item slot must have only one child:这是由于item插槽下有多个元素,应该只有一个div。哪怕是注释的div也会报错

 <draggable v-model="configDataArr">
      <template #item="{element,index}">
      <!--          {{element}}-->
      <div>{{element}}</div>
      </template>
  </draggable>

上面示例中div上面的元素已经注释,仍会出错。正确写法:

 <draggable v-model="configDataArr">
      <template #item="{element,index}">
      <div>
      //这里可以随意写
        {{element}}
      
      </div>
      </template>
  </draggable>

 

  • 15
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将现有 Vue 2.x 版本升级Vue 3.x 版本需要考虑以下几点: 1. 更新 Vue CLI 到最新版本。 2. 更新 Vue.js 和 Vue Router 到最新版本。 3. 使用新的 Composition API 替换 Options API。 4. 使用新的生命周期钩子函数替换旧的钩子函数。 5. 更新组件的 props 和事件处理函数。 6. 更新组件的模板语法。 具体步骤如下: 1. 更新 Vue CLI 到最新版本 可以使用以下命令更新 Vue CLI: ``` npm install -g @vue/cli ``` 2. 更新 Vue.js 和 Vue Router 到最新版本 可以使用以下命令更新 Vue.js 和 Vue Router: ``` npm install vue@next vue-router@next ``` 3. 使用新的 Composition API 替换 Options API Vue 3.x 引入了新的 Composition API,可以使用以下命令安装对应的插件: ``` npm install @vue/composition-api ``` 然后在组件中引入 Composition API: ``` import { reactive, computed } from '@vue/composition-api' ``` 使用 Composition API 替换 Options API,例如: ``` // Vue 2.x Options API export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } // Vue 3.x Composition API import { reactive } from '@vue/composition-api' export default { setup() { const state = reactive({ count: 0 }) function increment() { state.count++ } return { state, increment } } } ``` 4. 使用新的生命周期钩子函数替换旧的钩子函数 Vue 3.x 引入了新的生命周期钩子函数,例如 `beforeMount` 替换为 `onBeforeMount`,`mounted` 替换为 `onMounted`,以此类推。需要在组件中使用新的生命周期钩子函数,例如: ``` // Vue 2.x Options API export default { mounted() { console.log('mounted') } } // Vue 3.x Composition API import { onMounted } from '@vue/composition-api' export default { setup() { onMounted(() => { console.log('mounted') }) } } ``` 5. 更新组件的 props 和事件处理函数 Vue 3.x 引入了新的 props 和事件处理函数,例如 `v-bind:` 替换为 `:`,`v-on:` 替换为 `@`,以此类推。需要更新组件的 props 和事件处理函数,例如: ``` <!-- Vue 2.x --> <template> <button @click="handleClick">{{ count }}</button> </template> <script> export default { props: { count: { type: Number, required: true } }, methods: { handleClick() { this.$emit('click') } } } </script> <!-- Vue 3.x --> <template> <button @click="handleClick">{{ count }}</button> </template> <script> import { defineProps, defineEmits } from '@vue/composition-api' export default { props: defineProps({ count: { type: Number, required: true } }), emits: defineEmits(['click']), setup(props, { emit }) { function handleClick() { emit('click') } return { handleClick } } } </script> ``` 6. 更新组件的模板语法 Vue 3.x 引入了一些新的模板语法,例如 `<template v-for>` 替换为 `<template v-for="" as="">`,需要更新组件的模板语法,例如: ``` <!-- Vue 2.x --> <template> <ul> <li v-for="item in items">{{ item }}</li> </ul> </template> <!-- Vue 3.x --> <template> <ul> <template v-for="item in items" :key="item"> <li>{{ item }}</li> </template> </ul> </template> ``` 希望以上步骤能够帮助你成功地将现有 Vue 2.x 版本升级Vue 3.x 版本

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值