I have a pretty simple mixin that doesn't seem to be working using nuxt. It's so basic I'm at my whits end trying to figure out the bug. My component is part of a fairly complicated form composition scheme, but the mixin is super simple.
script from my component simplified
import { VInput } from 'vuetify'
import FieldMask from '~/utils/FieldMask'
import CognitoField from '~/mixins/cognitoField'
export default {
name: 'CognitoBaseField',
extends: [VInput, CognitoField],
props: {
inlineLabels: { default: true },
noIndependantSubmission: Boolean,
groupEdit: false,
cognitoName: '',
displayValue: '',
fieldValue: '',
placeHolder: { defalut: 'enter text' },
label: '',
masker: { type: Function, default: FieldMask },
items: [],
selected: {},
itemText: '',
itemValue: '',
showForm: Boolean,
disableEnterKeySubmission: Boolean,
},
data() {
return {
value: '',
formActive: false,
}
},
methods: {
onCancelClick() {
this.value = ''
this.formActive = false
console.log('test mixin')
console.log(this.thisIsATest())
},
},
}
My mixin - verbatim
export default {
computed: {
testComp() {
return 'working'
},
},
methods: {
thisIsATest() {
return 'working'
},
},
}
The result here is I trigger onCancelClick
on the component and the page crashes with
TypeError: this.thisIsATest is not a function
To really include a usable version of the component in this question I'd need to share a number of components so its probably not called for. Unless somebody can obviously see a glaring error, I guess the real question is how to troubleshoot this further?
CodePudding user response:
This should do it
<script>
import CognitoField from '~/mixins/cognitoField'
export default {
name: 'CognitoBaseField',
mixins: [CognitoField],
}
</script>
Regarding the documentation, this pattern is no longer recommended. The usage of Composables is better on several aspects.