vue.js - 无法在 vue 组件中导入故事

Question

我制作了一个看起来像（FilterCheckbox.js）的故事组件：

export default {
 name: 'filter-checkbox',
 props: ['options'],

 data() {
  return {
    text: this.$props.options
  }
 },

 watch: {
  options: function () {
   this.text = this.$props.options;
  }
 },

 template: `
  <label class="pure-material-checkbox">
    <input class="filterAllInput" type="checkbox" @click="onChange">
    <span> {{text}} </span>
  </label>
 `,

 methods: {
  onChange() {
   this.$emit('change');
  },
 },
};

它是一个带有文本和自己风格的复选框。现在我想在一个看起来像这样的组件中使用它（Filters.vue）：

<template>
 <div>
   <filter-checkbox @change="onChangeWhenFilterIsChoosen()" :options="options"></filter-checkbox>
 </div>
</template>

<script>
import FilterCheckbox from './../../stories/FilterCheckbox';
name: 'Filters',
components: { FilterCheckbox },
data: () => ({
 options: 'test text'
}),

methods: {

 onChangeWhenFilterIsChoosen: function () {

 }

},

</script>

不知何故，导入不起作用，故事组件没有显示在我的其他组件中。我究竟做错了什么？

新： 我现在制作了一个名为：1-Filter.stories.js 的 stories.js：

import { action } from '@storybook/addon-actions';
import FilterCheckbox from './FilterCheckbox';

export default {
 title: 'Checkbox',
};

export const text = () => ({
components: { FilterCheckbox },
data() {
 return {
    options: '12 Liter'
 }
},
template: '<filter-checkbox @change="action" :options="options"> 
 </filter-checkbox>',
  methods: { action: action('Changed') },
});

那就是很好地实现了过滤器复选框。但仍然无法在其他组件中工作。

标签： vue.jsstorybook

Answer 1

请使用此更新您的Filters组件；

<script>
import FilterCheckbox from './../../stories/FilterCheckbox';
export default {

 name: 'filters',
 components: { filterCheckbox: FilterCheckbox },
 data: () => ({
  options: 'test text'
 }),

 methods: {

  onChangeWhenFilterIsChoosen: function () {
   //
  }

 },
}

</script>