简体   繁体   中英

[Vue warn]: Failed to mount component when using mixin with a parameter

since yesterday I'm struggling with creating a Vue mixin with a parameter and I'm getting a [Vue warn]: Failed to mount component: template or render function not defined. Here is my JS file including mixin:

 export default (dataObject) => ({ data() { return { inputValue: '' } }, methods: { updateValue(newValue) { this.inputValue = newValue } }, mounted() { this.$bus.$on('value-changed', this.updateValue) }, beforeDestroy() { this.$bus.$off('value-changed'); }, computed: { filteredData() { if (this.inputValue.== '') { let newData = Object.keys(dataObject).filter(key => key.includes(this.inputValue)),reduce( (newData, current) => ((newData[current] = dataObject[current]), newData), {} ) return newData } else return dataObject } } })

And here is my Vue component:

 import searchLogic from '../logic/searchLogic.js' import { mapState } from 'vuex' export default { computed: {...mapState(['champions']), }, mixins: [searchLogic(this.champions)] }

Importing this file works, because when I try to import a normal mixin without arguments it works properly. I also tried passing champions and "champions" instead of this.champions but none seem to work. Is it some problem with a mixin? I read that it's possible to return a function returning an object to use parameters when creating mixins.

Based on this article you should be able to statically pass a parameter, but not dynamically. https://forum.vuejs.org/t/pass-parameters-to-a-mixin-method/26401/3

However, what I can see from the warn you get and the code you shared, is that you haven't defined any template for the component using the template property or the template element in the.vue file.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM