useModelMigration broken in async components #6607
Description
All components that use useModelMigration are broken when used inside an asynchronously loaded component. I've attached a patch you can apply to nextcloud/app_template@5b507c6 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>