nextcloud-libraries / nextcloud-libraries/nextcloud-vue
useModelMigration broken in async components
Open
@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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.