无法在vue组件中导入故事

问题描述 投票:0回答:1

我制作了一个类似(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>

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

vue.js storybook
1个回答
0
投票

请以此更新您的Filters组件;

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

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

 methods: {

  onChangeWhenFilterIsChoosen: function () {
   //
  }

 },
}

</script>

为了使用您的filter-checkbox组件,必须将其导入,因为camelCase是component对象,才能在模板中使用它。

© www.soinside.com 2019 - 2024. All rights reserved.