Vue3+Storybook：v-model组件故事中控件值同步问题求助

问题核心是Storybook控件面板默认是单向绑定：通过面板修改modelValue能同步到组件，但直接操作组件触发update:modelValue事件时，面板的参数不会自动更新。要实现双向同步，需在故事中维护响应式状态并关联到Storybook的args体系。

具体实现方案 #

1. 修改Story文件代码 #

在你的组件Story文件中，利用Vue的响应式状态和Storybook的useArgs钩子实现双向联动：

import GcInputText from './InputComponent.vue';
import { ref } from 'vue';
import { useArgs } from '@storybook/vue3';

export default {
  title: 'Components/GcInputText',
  component: GcInputText,
  argTypes: {
    modelValue: {
      control: 'text',
      description: '输入框绑定值'
    },
    readonly: {
      control: 'boolean',
      description: '是否只读'
    }
  }
};

const Template = () => {
  const [args, updateArgs] = useArgs();
  const inputValue = ref(args.modelValue);

  // 同步组件更新到Storybook控件面板
  const syncValue = (value: string) => {
    inputValue.value = value;
    updateArgs({ modelValue: value });
  };

  return {
    components: { GcInputText },
    setup() {
      return { args, inputValue, syncValue };
    },
    template: `
      <GcInputText 
        v-model="inputValue" 
        :readonly="args.readonly"
        @update:modelValue="syncValue"
      />
    `
  };
};

export const Default = Template.bind({});
Default.args = {
  modelValue: '',
  readonly: false
};

2. 原理说明 #

• useArgs：Storybook提供的钩子，用于获取当前控件参数和更新参数的方法，实现组件状态到面板的反向同步。
• 响应式状态inputValue：绑定到组件的v-model，确保组件输入能实时反映到状态中。
• syncValue方法：监听组件的update:modelValue事件，同时更新响应式状态和Storybook的args，完成双向同步。

修改后，无论是通过控件面板修改modelValue，还是直接在输入框中输入内容，两者都会实时同步更新。

内容的提问来源于stack exchange，提问作者Kim Boender