fix(vue3): codegen v-model on simple reactive variable

histoire-dev · Feb 18, 2023 · 5701116 · 5701116
1 parent b158b22
commit 5701116
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/examples/vue3/cypress/integration/codegen-vue3.js b/examples/vue3/cypress/integration/codegen-vue3.js
@@ -100,7 +100,8 @@ describe('Codegen (Vue 3)', () => {
 <HstText
   v-model:foo="state.count"
   v-model:my-prop.number="state.count"
-/>`)
+/>
+<HstText v-model="value" />`)
   })
 
   it('custom-directive', () => {

diff --git a/examples/vue3/src/components/CodeGen.story.vue b/examples/vue3/src/components/CodeGen.story.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   directives: {
@@ -27,6 +27,8 @@ function initState () {
 function onClick (event) {
   console.log(event)
 }
+
+const value = ref('Foo')
 </script>
 
 <template>
@@ -151,6 +153,9 @@ function onClick (event) {
           v-model:foo="state.count"
           v-model:my-prop.number="state.count"
         />
+        <HstText
+          v-model="value"
+        />
       </template>
     </Variant>
     <Variant

diff --git a/packages/histoire-plugin-vue/src/client/codegen.ts b/packages/histoire-plugin-vue/src/client/codegen.ts
@@ -121,7 +121,7 @@ async function printVNode (vnode: VNode, propsOverrides: Record<string, any> = n
         // v-model on component
         const vmodelListeners = [`onUpdate:${prop}`, `onUpdate:${camelCase(prop)}`]
         // @ts-ignore
-        const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key))
+        const vmodelListener = vmodelListeners.find(key => vnode.dynamicProps?.includes(key) || key in vnode.props)
         if (directive === ':' && vmodelListener) {
           // Listener
           skipProps.push(vmodelListener)