web-dev-qa-db-ja.com

Vue Js単一ファイルテンプレートのミックスインで使用する方法は？

こんにちは皆さんこんにちはVue JSに不慣れで、単一のファイルテンプレートを使用してフィルターでミックスインを使用しようとしていますが、苦労しています

エラーが発生しました

Unknown custom element: <side-bar-one> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

component.js

Vue.component('sideBarOne', require('./component/sidebars/sideBarOne.vue'));

sideBarOne.vue

import { default as config } from '../../../config';
import { filters as filter } from '../../../mixins/filters';

export default {
        mixins: [
            filter,
        ],
        mounted: function() {
        }
 }

filters.js

import { default as config } from '../config';
module.exports = {
    filters: {
        useLGLogo( str ) {
            if( str ) {
                return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
        useMDLogo( str ) {
            if( str ) {
                return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
        useSMLogo( str ) {
            if( str ) {
                return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
            }
        },
    }
};
javascriptvue.jsfrontendvuejs2vue-component
9
PenAndPapers

ファイルにいくつかの変更を加えて機能させました

filters.js

    import { default as config } from '../config';
    var filters = {
        filters: {
            useLGLogo( str ) {
                if( str ) {
                    return config.LG_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
            useMDLogo( str ) {
                if( str ) {
                    return config.MD_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
            useSMLogo( str ) {
                if( str ) {
                    return config.SM_LOGO + str.replace(/\s+/g, '-').toUpperCase() + '.png';
                }
            },
        }
    };

export default filters;

sideBarOne.vue

import { default as filters } from '../../../mixins/filters';
    export default {
        mixins: [
            filters,
        ],
        mounted: function() {
        }
    }
5
PenAndPapers