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>

以某种方式导入无法正常工作，并且故事组件未显示在我的其他组件中。我究竟做错了什么？

新：我现在制作了一个stories.js，名为：1-Filter.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') },
});

that可以很好地实现filter-checkbox。但仍然无法在其他组件中使用。

Answer 1

请以此更新您的Filters组件；

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

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

 methods: {

  onChangeWhenFilterIsChoosen: function () {
   //
  }

 },
}

</script>

无法在Vue组件中导入故事

1 个答案: