使用 v-model 和模板的 Vue 故事书示例？

Question

如何在vue storybook 中使用v-model？在我的例子中，它只是一个最终用户可以与v-model 一起使用的自定义组件。我有以下示例：

const dateRange = [
  new Date('2014/5/14').toISOString(),
  new Date('2015/2/2').toISOString(),
]

const Template = (args, { argTypes }) => ({
  components: { DateRangePicker },
  data: () => ({ dateRange }),
  props: Object.keys(argTypes),
  template:
    '<DateRangePicker v-bind="$props" v-model="dateRange" @input="onInput" />',
})

export const Default = Template.bind({})

Default.args = {
  dateRange: [], // if i remove this line, error is gone but i can't use a different default value for v-model via the template and all stories use the same value for `dateRange`.
}

如果我执行上述操作，则会出现以下错误：The data property "dateRange" is already declared as a prop. Use prop default value instead.。我正在尝试使用以v-model 传递的不同值示例编写故事案例@

Answer 1

问题是你定义了同一个变量dateRange的两个实例，一个是data: () => ({ dateRange }),的数据，一个是v-bind="$props"的prop。

要解决此问题，您需要删除数据或道具。

如果您删除数据，您将遇到不同的问题，那就是您正在尝试使用 v-model 修改 parent prop。 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "dateRange"

如果你移除了这个prop，你就不能用控件的值来修改它或者导出不同的case。

解决方案

1. 保留您的道具 dateRange 以便于创建不同的案例
2. 重命名 v-model，查看任何更改的 dateRage 属性并更新 v-model。
3. 您可以决定是否使用 dateRange 保留绑定。 *

const range = [
  new Date('2014/5/14').toISOString(),
  new Date('2015/2/2').toISOString(),
]

const Template = (args, { argTypes }) => ({
  components: { DateRangePicker },
  data: () => ({ range }),
  props: Object.keys(argTypes),
  template: '<DateRangePicker v-bind="propsWithoutRange" v-model="range" @input="onInput" />',
  watch: {
      dateRange(value) {
          if (value.length === 2) {
              this.range = value;
          }
      }
  },
  computed: {
      // *Optional
      propsWithoutRange() {
          const { dateRange, ...all } = this.$props;
          return all;
      }
  }
})

export const Default = Template.bind({})
Default.args = {
  dateRange: []
}