Storybook Vue3 - 在故事中使用 v-model

Question

我有一个关于带有 v 模型的 Storybook 和 Vue 组件的问题。当为一个带有 v 模型的输入组件编写故事时，我想要一个反映该 v 模型值的控件。从控件设置 modelValue 没有问题，但是当使用组件本身时，控件值保持不变。我现在在网上搜索了一段时间，但似乎找不到解决方案。

一个小例子：

// InputComponent.vue
<template>
  <input
      type="text"
      :value="modelValue"
      @input="updateValue"
      :class="`form-control${readonly ? '-plaintext' : ''}`"
      :readonly="readonly"
  />
</template>

<script lang="ts">
    export default {
        name: "GcInputText"
    }
</script>

<script lang="ts" setup>
    defineProps({
        modelValue: {
            type: String,
            default: null
        },
        readonly: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update:modelValue']);

    const updateValue = (event: Event) => {
        const target = event.target as HTMLInputElement;
        emit('update:modelValue', target.value);
    }
</script>

在故事书中：

有人有解决方案来使其工作吗？

提前致谢！

Answer 1

就我而言，我有一个使用

modelValue

属性的自定义选择输入。

我尝试过这个并为我工作：

在我的组件.stories.js：

import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  title: 'Core/MyComponent',
  component: MyComponent,
  argTypes: { }
}

const Template = (args) => ({
  components: { MyComponent },
  setup() {
    let model = ref('Javascript')
    const updateModel = (event) => model.value = event

    return { args, model, updateModel }
  },
  template: '<my-component v-bind="args" :modelValue="model" @update:modelValue="updateModel" />'
})

export const Default = Template.bind({})
Default.args = {
  options: [
    'Javascript',
    'PHP',
    'Java'
  ]
}

Answer 2

也可以直接使用v-model：

import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, watch } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  title: 'Core/MyComponent',
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Example: Story = {
  render: (args) => ({
    components: { MyComponent },
    setup() {
      const model = ref(args.modelValue);

      // Optional: Keeps v-model in sync with storybook args
      watch(
        () => args.modelValue,
        (val) => {
          model.value = val;
        },
      );

      return { args, model };
    },
    template: '<MyComponent v-bind="args" v-model="model" />',
  }),
  args: {
    modelValue: 'Value',
  },
};

我在此解决方案中使用 Storybook 版本 8.1.1。您也可以通过使用可写计算属性来保持 v-model 值同步，但观察程序也可以工作。