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

来源:互联网 发布:淘宝苹果4s外壳多少钱 编辑:程序博客网 时间:2024/05/16 14:40
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 applicationVue.i18n.add('en', translationsEn);// set the start locale to useVue.i18n.set('en');

为什么必须要设置 add 和 set方法,这我就不太清楚了,我只是找到了解决方法。

这是这插件在项目里的效果:



阅读全文
1 0