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

Question

v-model我该如何使用vue storybook？就我而言，它只是最终用户可以与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 with data: () => ({ dateRange }),，另一个作为 prop with v-bind="$props"。

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

如果删除数据，您将遇到不同的问题，那就是您尝试使用 v-model 修改父属性。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"

如果删除该属性，则无法使用控件的值修改它或导出不同的情况。

解决方案

1. 保留您的 prop 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: []
}