使用v模型和模板的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: () => ({ dateRange }),定义的数据，一个是用v-bind="$props"作为支柱。

要解决这个问题，您需要删除数据或支柱。

如果您删除数据，您将有一个不同的问题，这将是您试图修改父支持使用v-模型。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. 保留了道具dateRange，将v模型重命名为
2. ，查看任何更改的dateRage支柱，并更新v模型。
3. 您可以决定使用dateRange保留绑定，也可以不使用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: []
}