首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

来自vue-i18n的全局方法this.$t在函数中不起作用

问题:来自vue-i18n的全局方法this.$t在函数中不起作用。

答案: 在Vue.js中使用vue-i18n插件实现国际化时,可以通过this.$t方法来实现文本的翻译。然而,有时候在函数中使用this.$t方法时,可能会出现不起作用的情况。

这个问题通常是由于作用域的问题导致的。在Vue中,当我们在函数中使用this时,this的指向可能会发生改变。在函数中,this指向的是函数本身,而不是Vue实例。因此,this.$t方法无法正常工作。

为了解决这个问题,可以采用以下几种方法:

  1. 使用箭头函数:箭头函数中的this是通过词法作用域来绑定的,不会受到函数内部作用域的影响。因此,可以将函数改写为箭头函数来解决this指向的问题。
代码语言:txt
复制
// 示例代码
methods: {
  myFunction: () => {
    this.$t('key'); // 此时this指向Vue实例,可以正常使用this.$t方法
  }
}
  1. 将this.$t方法保存在一个变量中:将this.$t方法保存在一个变量中,然后在函数中使用该变量来调用翻译方法。
代码语言:txt
复制
// 示例代码
methods: {
  myFunction: function() {
    const translate = this.$t;
    translate('key'); // 使用变量调用翻译方法
  }
}
  1. 使用Vue的实例方法$translate:vue-i18n插件还提供了Vue的实例方法$translate,该方法可以在函数中直接使用,无需通过this来调用。
代码语言:txt
复制
// 示例代码
methods: {
  myFunction: function() {
    this.$translate('key'); // 直接调用$translate方法
  }
}

总结:在函数中使用vue-i18n插件的this.$t方法时,可能会遇到this指向的问题。可以通过使用箭头函数、保存在变量中或者使用Vue的实例方法$translate来解决这个问题。如果还有其他问题,建议查阅vue-i18n的官方文档或寻求相关技术支持。

推荐的腾讯云产品: 腾讯云提供了丰富的云计算产品和解决方案,可以满足各种场景下的需求。以下是几个相关产品的介绍链接:

  1. 云服务器(CVM):提供可扩展的计算能力,支持自定义配置和弹性调整,适用于各种应用场景。产品介绍链接
  2. 云数据库MySQL版(CDB):稳定可靠的关系型数据库服务,提供高性能、高可用的数据库解决方案。产品介绍链接
  3. 云对象存储(COS):安全可靠的云存储服务,适用于存储和管理各种类型的数据。产品介绍链接
  4. 云原生容器服务(TKE):基于Kubernetes的容器管理服务,简化容器化应用的部署和管理。产品介绍链接

以上是腾讯云提供的一些产品,可根据具体需求选择适合的产品和服务。请注意,这仅仅是推荐,你也可以根据自己的需求选择其他云计算服务提供商的产品。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【源码】Vue-i18n: 你知道国际化是怎么实现么?

// Vue 原型拓展方法,代码 extend.js 里 extend(Vue) // Vue 通过 mixin 方式混入 Vue.mixin(mixin) // 全局指令 Vue.directive... $t 方法实现,揭开国际化翻译神秘面纱 extent.js ,我们看到 Vue 原型挂载 $t 方法,这是我们为什么能够直接在模板中使用原因。...现在要做就是去监听这些 data 变化 Vue-i18n 这一块逻辑主要是 mixin.js 文件 beforeCreate 调用 watchI18nData 方法,这个方法实现如下...Vue 创建新组件实例过程调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 形式存储组件实例 return this._vm....全局自定义指令以及全局组件实现 extent.js ,我们提到了注册全局指令和全局组件,我们来看下如何实现 // 全局指令 Vue.directive('t', { bind, update

3.1K40
  • 【源码】Vue-i18n: 你知道国际化是怎么实现么?

    其中左侧是 Vue-i18n 提供一些方法、组件、自定义指令等能力,右侧是 Vue-i18n 对数据管理 入口文件为 index.js, VueI18n 类 constructor 先调用...// Vue 原型拓展方法,代码 extend.js 里 extend(Vue) // Vue 通过 mixin 方式混入 Vue.mixin(mixin) // 全局指令 Vue.directive... $t 方法实现,揭开国际化翻译神秘面纱 extent.js ,我们看到 Vue 原型挂载 $t 方法,这是我们为什么能够直接在模板中使用原因。...现在要做就是去监听这些 data 变化 Vue-i18n 这一块逻辑主要是 mixin.js 文件 beforeCreate 调用 watchI18nData 方法,这个方法实现如下...Vue 创建新组件实例过程调用此函数。它应该返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 形式存储组件实例 return this._vm.

    2.1K10

    PHP如何使用全局变量方法详解

    有很多方法能够使这些数据成为全局数据,其中最常用就是使用“global”关键字申明,稍后文章我们会具体讲解到。...它们通常都来自数据或者其他外部数据,使用这些变量通常是不会产生问题,因为他们基本上是不可写。 但是你可以使用你自己全局变量。...为了更加容易使用注册器,我们把它调用改成单件模式(译者注:不使用前面提到函数传递)。因为我们程序只需要使用一个注册器,所以单件模式使非常适合这种任务。...虽然这些变量都非常标准,而且在你使用也不会出什么问题,但是某些情况下,你可能同样需要使用注册器来封装它们。 一个简单解决方法就是写一个类来提供获取这些变量接口。...> 正如你看到,现在我们不再依靠任何全局变量了,而且我们完全让这些函数远离了全局变量。 结论 本文中,我们演示了如何从根本上移除代码全局变量,而相应用合适函数和变量来替代。

    7.3K100

    如何在vue项目中支持多种语言

    ' } }, zh: { message: { hello: '世界' } } } 从上面的代码可以看出,hello是一个公众变量,中文网站显示为“世界”,英文网站为“...然后通过对象属性来区分中英文,然后将这个对象加载到全局。如何加载到全局呢,Vue项目中,就需要用到Vue-i18n这个模块。...$t("message.hello")) } } 打印结果为世界,因为创建vue-i18n实例过程我们传入了两个参数,local和messages...然后实例化组件过程中将i18n传入,这样组件中就可以访问$t这个函数了,通过这个函数,我们可以取出messages属性值,将其渲染到页面。...核心是实例化过程通过local这个参数来实现实现语言切换,message来实现语言包加载,开发者只需将需要翻译公共部分抽离出来放到message即可。

    1.2K40

    Vue项目实战05:18n实现多语言自动切换-浏览器语言设置「建议收藏」

    什么是vue-i18n i18n是 Internationalization 这个英文简写,即国际化意思,vue-i18n是一款针对于vue开发国际化插件,让项目支持多语言切换,以适应不同地区用户需求...安装vue-i18n 直接在项目中执行安装命令:npm install vue-i18n --save ​全局引入vue-i18n 项目中引入vue-i18n,实例化vue-i18n将需要加载语言包通过...如果你觉得每次都要通过lang来获取数据比较麻烦,我们可以再优化下,把export const lang=改写成module.exports= 模式,这样就可以直接获取对象对象了。...页面渲染 静态渲染时,用双大括号包裹,把数据当成变量引入,$t用来调用语言包中键对应值。如果用是element-ui动态绑定值,双引号即可。...$t('nav') } } ---- ---- 以上是根据浏览器自动切换语言 点击切换 //手动切换语言 change(){ if (this.

    2.3K20

    Vue如何处理国际化(i18n)需求?分享一下实践经验

    Vue处理国际化需求,可以借助于Vue插件vue-i18n来实现。下面将分享一些我处理国际化需求时实践经验。 1、安装和配置vue-i18n: 首先,需要安装vue-i18n插件。...项目的根目录下使用npm或yarn命令进行安装: npm install vue-i18n 然后,Vue应用入口文件(通常是main.js)引入并配置vue-i18n: import Vue from..., "welcome": "欢迎来到我应用。" } 3、组件中使用国际化内容: Vue组件,可以通过this.t方法来获取对应语言翻译内容。...$t方法第二个参数,可以传入一个对象来替换翻译内容占位符。...} 以上是我处理Vue国际化需求时一些实践经验。通过vue-i18n插件,我们可以轻松地实现多语言支持,并且能够方便地切换和翻译不同语言内容。

    65610

    前端国际化辅助工具——自动替换中文并翻译

    vue-i18n: $t, react-i18next: t include: [], // 需要翻译目录或文件 exclude: [], // 不需要翻译目录或文件 如果 exclude...vue-i18n: $t, react-i18next: t include: [], // 需要翻译目录或文件,如果为空,将不进行任何操作。...= '一' 启用工具后,源码文件 const test = '一' 将会被替换为 const test = this....这个 loader 是一个本地文件地址,你提供文件需要写一个转换函数,将其他格式文件转换成 i18n-replace 要求数据格式,就像下面这个函数一样: const excelToJson =...例如 vue-i18n 国际化工具使用是 $t,而 react-i18next 使用t。 translation 是否需要自动翻译,默认为 false。

    3.8K30

    Ant-design-vue+vue-i18n实现前端国际化

    安装vue-i18n yarn add vue-i18n public文件夹下新建languages文件夹,新建langs文件夹和i18n.js,langs文件夹下新建index.js、cn.js、...,接下来我们写切换多语言功能,src下app.vue文件引入多语言文件和我们写切换方法: created内容如下: created() { // 默认中文 localStorage.lang...$on(),这个是组件传值一种方式,需要在main.js配置, moment.locale("cn");这个是ant-design-vue内部组件国际化切换方法。...页面适配多语言分为view中使用和js view我们用 :label="$t('logistics.search')" 或者 {{$t('logistics.search')}} js我们用 this...$t("logistics.search") 简单测试下切换多语言,login.vue(你可以是任意组件)写调用方法 显示效果 多语言适配完成,但是,如果我们系统文字多,那一个文件会很大,加载很慢

    3.5K1813

    pythonbool函数用法_pythonbool函数取值方法「建议收藏」

    大家好,又见面了,我是你们朋友全栈君。 bool是Boolean缩写,只有真(True)和假(False)两种取值 bool函数只有一个参数,并根据这个参数值返回真或者假。...>>> bool(0) False >>> bool(1) True >>> bool(-1) True >>> bool(21334) True 2.当对字符串使用bool函数时,对于没有值字符串(...>>> bool(”) False >>> bool(None) False >>> bool(‘asd’) True >>> bool(‘hello’) True 3.bool函数对于空列表,字典和元祖返回...>>> x = raw_input(‘Please enter a number :’) Please enter a number :4 >>> bool(x.strip()) True 以上这篇python...bool函数取值方法就是小编分享给大家全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

    2.8K20

    初识ABP vNext(6):vue+ABP实现国际化

    ABP后端支持是本地化,而vue-element-admin支持是国际化,使用vue-i18n实现;本文默认它两者是一回事。 前面的章节,已经大概分析了vue+ABP国际化实现思路。...在前端实现就很简单,直接在vue-element-adminsrc\lang\目录下配置相应文本,然后界面使用i18n$t()方法渲染就可以了,这个不多做介绍。本文只探讨第一种实现方式。...vue-i18n,就可以使用了。...接下来只需要把界面上对应文本使用vue-i18n$t()方法渲染就好了,比如: ? 前端需要改动地方比较多,但都是类似的修改。。。直接看效果: ? ? ?...文本只能写在texts属性,key/value形式,不支持多层级。 而vue-i18n是支持多层级: ? 所以ElementUI这部分文本还是放在前端了。

    1.4K10

    vuehtml标签{{}}内可以调用函数方法

    今天领导提个需求,要求金额上强制保留两位小数,本想着后台直接返回数据时,带着两位小数,前端只是做个显示作用,后台说保留了小数但在传输过程中去掉了,可能他们做了格式转化。...没办法了只能又是我们前端操作了,牵扯价钱太多了,很多时候又有for 循环,怎么办呢? 思路:{{}}里面的是一个表达式,可不可以是个函数呢?...经测试是可以,具体实现方法如下: 写一个公共强制保留两位小数js方法 function toDecimal2 (x) { var f = parseFloat(x) if (isNaN(f....' } while (s.length <= rs + 2) { s += '0' } return s } export default { toDecimal2 } main.js...引用: import newPrice from '.

    30.8K20

    c语言random函数vc,C++ 随机函数random函数使用方法

    大家好,又见面了,我是你们朋友全栈君。 C++ 随机函数random函数使用方法 一、random函数不是ANSI C标准,不能在gcc,vc等编译器下编译通过。...可改用C++下rand函数来实现。 1、C++标准函数库提供一随机数生成器rand,返回0-RAND_MAX之间均匀分布伪随机整数。 RAND_MAX必须至少为32767。...(但这样便于程序调试) 2、C++另一函数srand(),可以指定不同数(无符号整数变元)为种子。但是如果种子相同,伪随机数列也相同。一个办法是让用户输入种子,但是仍然不理想。...通常rand()产生随机数每次运行时候都是与上一次相同,这是有意这样设计,是为了便于程序调试。...三、按要求设置概率 比如要设置一个10%概率问题,我们可以采取rand()函数来实现,if条件句判断里,用rand()得到值%一个设定值,再与另一个值做“==”运算。

    5K20

    vue国际化vue-i18n简单使用

    当然是直接用插件了,并不是自己实现 vue-i18n使用很简单: 安装依赖:npm i vue-i18n -S 引入、调用: import VueI18n from 'vue-i18n'; Vue.use...$mount('#app') 内部会把i18n通过mixin合并到vue实例上,新加属性i18n、t等属性方法。 直接使用: {{$t('lang.login')}} 切换语言: this....实现起来很简单,你可以打印$t看看,其实就是一个方法,返回对应内容: ? 难是内容对应zh.js和en.js,更别说其他语言了。...当然,vue-i18n还提供了其他属性和方法,只是官网我打不开,没办法多说一些。 element-ui也是通过切换语言文件实现。...至于vue官网,我看见是直接地址都变了,也不知道是不是采用这种思路,直接替换文本内容。 (完)

    91510
    领券