您的位置:首页 > 其它

[置顶] 解决vux 引入组件时Error in render function: "TypeError: _vm.$t is not a function"问题

2017-08-23 14:38 1896 查看
vux是基于vue.js的一个组件集合,有时候导入组件是遇到各种报错。
例如,我们引入常用的vux-Datetime组件:

<script>
import pcHead from '@/components/Public/Pc-Head'
import {Datetime } from 'vux'
export default {
name: "",
data: function data() {
return {
value: '2015-11-12'
}
},
components: {
pcHead,
Datetime
},
mounted: function mounted() {
this.$nextTick(() => {
})
}
}
</script>
<datetime v-model="value"></datetime>

正确引入后控制台发出各种报错:



这种报错在官网的解释是:

下面的$t是i18n使用的翻译函数,一般情况下可以直接使用字符串。
也没有给出更快的解决方案:



所以我在这里给出这个问题的解决方法,其实特别简单,只要在main.js文件里引入vuex 和 vuexI18n 插件并引用即可。关键看代码:

import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
Vue.use(VueResource);
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
i18n: vuexI18n.store
}
});
Vue.use(vuexI18n.plugin, store);
const translationsEn = {
"content": "This is some {type} content"
};

// translations can be kept in separate files for each language
// i.e. resources/i18n/de.json.
// add translations directly to the application
Vue.i18n.add('en', translationsEn);

// set the start locale to use
Vue.i18n.set('en');


为什么必须要设置 add 和 set方法,这我就不太清楚了,我只是找到了解决方法。
这是这插件在项目里的效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐