排查 vue extends 失败

Question

我有一个非常简单的 mixin，它似乎无法使用 nuxt。它是如此基础，以至于我竭尽全力试图找出错误。我的组件是一个相当复杂的表单组合方案的一部分，但是 mixin 非常简单。

我的组件中的脚本已简化

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())
    },
  },
}

我的 mixin - 逐字记录

export default {
  computed: {
    testComp() {
      return 'working'
    },
  },
  methods: {
    thisIsATest() {
      return 'working'
    },
  },
}

这里的结果是我在组件上触发 onCancelClick，页面崩溃

TypeError: this.thisIsATest is not a function

要在这个问题中真正包含该组件的可用版本，我需要共享一些组件，所以它可能不需要。除非有人可以明显地看到明显的错误，否则我想真正的问题是如何进一步解决这个问题？

Answer 1

应该这样做

<script>
import CognitoField from '~/mixins/cognitoField'

export default {
  name: 'CognitoBaseField',
  mixins: [CognitoField],
}
</script>

关于文档，这个模式没有longer recommended. The usage of Composables在几个方面更好。

排查 vue extends 失败

Troubleshooting vue extends failure

mixins

vue.js

vuejs2

nuxt.js