ionItemReorder event not triggering

Ionic Framework Ionic Vue
1

I just made a new Ionic 8 Vue app and tried the ion-reorder-group component, but the ionItemReorder event is not triggering and the animation freezes (because i cant do the event.detail.complete()).

I am just using the basic example: ion-reorder: Drag and Drop Icon to Reorder Items

Screenshot 2025-02-18 at 17.28.37
Screenshot 2025-02-18 at 17.28.37470Ă—220 2.62 KB

2

Ionic Vue 8.4.3 event handlers are broken. Revert to 8.4.2 until a fix is released.

3

Does not work for me. I started with 8.0, went to the latest version and tested 8.4.2 now, but nothing works.

4

You’ll have to show more code. And verify that you installed npm packages after updating the version to 8.4.2.
If you go to the docs and click on the :zap: for stackblitz sample, it is working there. And I forked that and converted it to script setup and it still works and fires the event.detail.complete(). Here’s my fork:

1 Like
5

I really just went do Vue QuickStart Global Component for Generating Ionic Vue Apps, created a new app and copy pasted the basic example of the reorder component: ion-reorder: Drag and Drop Icon to Reorder Items. I am not new with Vue/Ionic and i really dont know whats the issue here.

The package json when installing a new project with the CLI looks like this:

{
  "name": "reorder-new-test",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test:e2e": "cypress run",
    "test:unit": "vitest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@capacitor/app": "7.0.0",
    "@capacitor/core": "7.0.1",
    "@capacitor/haptics": "7.0.0",
    "@capacitor/keyboard": "7.0.0",
    "@capacitor/status-bar": "7.0.0",
    "@ionic/vue": "^8.0.0",
    "@ionic/vue-router": "^8.0.0",
    "ionicons": "^7.0.0",
    "vue": "^3.3.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@capacitor/cli": "7.0.1",
    "@vitejs/plugin-legacy": "^5.0.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/test-utils": "^2.3.0",
    "cypress": "^13.5.0",
    "eslint": "^8.35.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^22.1.0",
    "terser": "^5.4.0",
    "typescript": "~5.6.2",
    "vite": "~5.2.0",
    "vitest": "^0.34.6",
    "vue-tsc": "^2.1.10"
  },
  "description": "An Ionic project"
}

I also tested it with 8.4.2 and installed the depencies again. The event doesnt get logged as well, so i am not getting the event triggered.

6

Did you try using “8.4.2” as the version in package.json? That will pull ONLY 8.4.2. This is called pinning the version. If you use “^8.4.2” (with the caret) you will actually get the latest minor update which is 8.4.3.
Sorry if you already know this. Just checking the base assumptions.

7

Omg, thats embarrassing now haha. I forgot about that… Thank you so much, it of course works now.

1 Like
9

Sorry, but did you read the conversation? I tried the basic example from ionic and in there, the @ionItemReorder event and handleReorder function, but the event didnt get triggered. And your last part of your comment ist repeating, what dolthead said. Next to that, you are sharing a weird link… I dont know about this one