Error in v-on handler: "TypeError: Cannot read property '_t' of undefined"

Question

以下代码可以完美运行：

// validation-rules.ts
export const requiredRule = (val: string) => !!val || 'Field is required'

用法：

import { requiredRule } from 'src/components/application-form/shared/validation-rules'

export default defineComponent({
  setup() {
    const answerInputValidationRules = computed(() => {
        return [requiredRule]
    })
    return { answerInputValidationRules }
  },
})

当我们尝试使用包 vue-i18n-composable 添加翻译密钥时，它失败并出现以下错误：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '_t' of undefined"

到目前为止我们已经尝试过的：

// validation-rules.ts
import { computed, ref } from '@vue/composition-api'
import { useI18n } from 'vue-i18n-composable'

const { t } = useI18n()

export const requiredRule = (val: string) =>
  !!val || ref(t('validationRules.requiredField')) // fail

export const requiredRule = (val: string) =>
  !!val || computed(() => t('validationRules.requiredField')) // fail

export const requiredRule = (val: string) =>
  !!val || t('validationRules.requiredField') // fail

setup() 方法内的翻译也完美无缺。

import { useI18n } from 'vue-i18n-composable'

export default defineComponent({
  setup() {
    const { t } = useI18n()
    
    const driverRule = (val: string) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(`${t('validationRules.requiredField')}`)
        }, 1000)
      })
    }

我们在这里缺少什么？我们如何才能只有一个文件包含这些规则的所有逻辑并在整个应用程序中使用它们？

Answer 1

显然我没有完全理解它。这为我修复了它：

// useValidationRules.ts
import { useI18n } from 'vue-i18n-composable'

export const useValidationRules = () => {
  const { t } = useI18n()

  const requiredRule = (val: string) =>
    !!val || t('validationRules.requiredField')

  return { requiredRule }
}

用法：

import { useValidationRules } from 'src/composables/useValidationRules'

export default defineComponent({
  setup() {
    const { requiredRule } = useValidationRules()

    const answerInputValidationRules = computed(() => {
        return [requiredRule]
    })
    return { answerInputValidationRules }
  },
})

Error in v-on handler: "TypeError: Cannot read property '_t' of undefined"

Error in v-on handler: "TypeError: Cannot read property '_t' of undefined"

vue.js

vuejs2

vue-i18n

vue-composition-api