Hi everyone im new to Vue JS and im trying to use mixins on my filters using single file template and I'm having some hard time
Error I'm getting
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';
}
},
}
};
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
To use the Mixin in any component, you simply have to import the Mixin module and assign it to the mixins configuration property in the component. At runtime, the options specified in the Mixin will be available as options and will be “mixed” into the consuming component's options.
I've made some changes on my files and made it working
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() {
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With