nextcloud-libraries / nextcloud-libraries/nextcloud-vue

useModelMigration broken in async components

Open
#6,607 16 comments 1 reaction 1 assignee View on GitHub

@susnux is already working on this.

Since Aug 26, 2025.

bug need info
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

All components that use useModelMigration are broken when used inside an asynchronously loaded component. I've attached a patch you can apply to https://github.com/nextcloud/app_template/commit/5b507c644128661c863d81cf40216b00079d479d to reproduce.

minimal patch
diff --git a/src/App.vue b/src/App.vue
index e579eba..860ff4b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,22 @@
 <template>
 	<NcAppContent>
 		<div id="app_template">
-			<h1>Hello world!</h1>
+			<Repro />
 		</div>
 	</NcAppContent>
 </template>
 
 <script>
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
+import { defineAsyncComponent } from 'vue'
+// import Repro from './Repro.vue'
 
 export default {
 	name: 'App',
 	components: {
 		NcAppContent,
+		// Repro,
+		Repro: defineAsyncComponent(() => import('./Repro.vue')),
 	},
 }
 </script>
diff --git a/src/Repro.vue b/src/Repro.vue
new file mode 100644
index 0000000..5b5f8bb
--- /dev/null
+++ b/src/Repro.vue
@@ -0,0 +1,36 @@
+<template>
+	<div>
+		<NcActions>
+			<NcActionRadio v-for="option in radioOptions"
+				:key="option.value"
+				:value="option.value"
+				:disabled="option.disabled"
+				name="uniqueId"
+				v-model="radioValue">
+				{{ option.label }}
+			</NcActionRadio>
+		</NcActions>
+		<span>Selected value: {{ radioValue }}</span>
+	</div>
+</template>
+
+<script>
+import NcActions from '@nextcloud/vue/components/NcActions'
+import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
+
+export default {
+	components: {
+		NcActions,
+		NcActionRadio,
+	},
+	data: () => ({
+		radioOptions: [
+			{ value: 'first', label: 'First choice', disabled: false },
+			{ value: 'second', label: 'Second choice', disabled: false },
+			{ value: 'third', label: 'Third choice', disabled: false },
+			{ value: 'fourth', label: 'Fourth choice (disabled)', disabled: true },
+		],
+		radioValue: 'first',
+	}),
+}
+</script>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.