我想用Storybookvue-select个组件添加一些故事,但我正在处理更复杂的 case ,涉及传递props 或方法.

当我通过props inside the template it works:

storiesOf('VSelect', module)
.add('with labeled custom options', () => ({
        components: {VSelect},
        template:   `<v-select :options='[{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]' />`
    }))

我觉得它不太可读,所以我想把它们作为props 或数据单独传递:

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        props:      {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        data:       {options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]},
        template:   `<v-select />`
    }))

但这两个都不是故事书所说的——它们似乎被忽视了.

推荐答案

我已经解决了.

.add('with labeled custom options as props', () => ({
        components: {VSelect},
        data() {
            return {
                options: [{value: "CA", label: "Canada"}, {value: "UK", label: "United Kingdom"}]
            }
        },
        template:   `<v-select :options="options" />`
    }))

我以前的方法有两个问题:

  • Passed data没有封装在函数中
  • 我应该只通过data分.

Vue.js相关问答推荐

在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱?

可组合数据获取示例

我在 nuxt2 中看不到索引页

在 Vuex Store 模块中使用 Vue.js 插件

Vue:根元素内容和内容分发槽

如何使用带有自定义标签和类的`transition-group`

Vue:限制文本区域输入中的字符,截断过滤器?

为什么 vue 中的 @mouseover 操作不起作用

vuex 中 { dispatch, commit } 的类型是什么?

Vuetify - 如何保持第一个扩展面板默认打开,如果我打开另一个面板,其他面板应该关闭?

Vue test-utils 如何测试 router.push()

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

从 Url 中删除查询字符串参数

我可以在 Vue 实例方法中传播的 mapMutations 中使用this吗?

Vue 3:模块 '"../../node_modules/vue/dist/vue"' 提示

如何从 keep-alive 中销毁缓存的 Vue 组件?

如何设置 :id 前缀字符串?

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

Vuetify 离线文档

返回 VueJS 方法的Native Code消息