v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 '_t'”答案

【问题标题】：Error in v-on handler: "TypeError: Cannot read property '_t' of undefined"v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 '_t'”
【发布时间】：2020-12-03 13:58:52
【问题描述】：

以下代码完美运行：

// 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 警告]：v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 '_t'”

到目前为止我们所做的尝试：

// 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)
      })
    }

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

【问题讨论】：

标签： vue.js vuejs2 vue-i18n vue-composition-api

【解决方案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 }
  },
})

【讨论】：