I have a vue 2 application setup which uses Servertable to display grid. I have implemented vueI18n for localization. My sample code for options for server table is as follows: ``` return { columns: ["question", "service_categories", "countries", "nationalities", "languages", "visible", "status", "updated_at", "actions"], filters: ["question", "service_categories", "countries", "nationalities", "languages", "visible", "status"], sorting:["question", "visible", "status", "created_at", "updated_at"], dateColumns: [], id:'faq-list', name:'faq-list', headings: { question: function(h){ return this.$t('FAQ.Question'); }, service_categories: function(h){ return this.$t('ServiceCategory.ServiceCategory'); }, countries: function(h) { return this.$t('Search.Country'); }, nationalities: function(h) { return this.$t('Search.Nationality'); }, status: function(h) { if(this != undefined) { return this.$t('Common.Status'); } }, visible: function(h) { if(this != undefined) { return this.$t('FAQ.VisibleTo'); } }, languages: function(h) { // if(this != undefined) { return this.$t('Menu.Languages'); // } }, created_at: function(h) { return this.$t('Common.Created'); }, updated_at: function(h) { return this.$t('Common.Updated'); }, actions: function(h) { return this.$t('Common.Actions'); }, }, templates: { actions: actions }, listColumns: { status: [ { id: 'DECLINED', text: 'Revision requested' }, { id: 'DRAFT', text: 'Draft' }, { id: 'WAITING_FOR_APPROVAL', text: 'Waiting for Approval' }, { id: 'PUBLISHED', text: 'Published' } ], visible: [ { id: 'UNHCR_STAFF', text: 'Staff' }, { id: 'PARTNERS', text: 'Partners' }, { id: 'PUBLIC', text: 'Public' } ], languages: langList }, data: [], exportData:[] } }, ``` When I run the application, I get the following error: ``` TypeError: Cannot read property '$t' of undefined at languages (28.6acaec28991bbed1879c.hot-update.js:91) at String.replace () at VueComponent.webpackJsonp../node_modules/vue-tables-2/compiled/methods/display.js.module.exports (28.js:16968) at 28.js:18932 at 28.js:18599 at Array.map () at Object.columnFilters (28.js:18585) at Proxy.webpackJsonp../node_modules/vue-tables-2/compiled/templates/default.js.module.exports (28.js:19883) at Proxy. (28.js:19803) at VueComponent.Vue._render (main.js:44316) ``` and ``` main.js:41399 [Vue warn]: Error in render: "TypeError: Cannot read property '$t' of undefined" found in ---> at src/components/core/list/list.vue at src/components/pages/componentContainer.vue at src/components/faq/list.vue at src/components/layouts/right-side.vue at src/layout.vue at src/App.vue ``` and ``` TypeError: Cannot read property '$t' of undefined at languages (28.6acaec28991bbed1879c.hot-update.js:91) at String.replace () at VueComponent.webpackJsonp../node_modules/vue-tables-2/compiled/methods/display.js.module.exports (28.js:16968) at 28.js:18932 at 28.js:18599 at Array.map () at Object.columnFilters (28.js:18585) at Proxy.webpackJsonp../node_modules/vue-tables-2/compiled/templates/default.js.module.exports (28.js:19883) at Proxy. (28.js:19803) ``` As you can see, the error message is thrown at heading section (for languages). Is there a way to fix this? Thank you in advance. My webpack configuration is as follows: ``` let mix = require('laravel-mix') let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; let webpack = require('webpack'); const path = require('path') //====set alias for isotope let plugins = []; plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)); if(!mix.inProduction()){ // plugins.push(new BundleAnalyzerPlugin()); } mix.webpackConfig({ plugins: plugins, resolve: { alias: { 'masonry': 'masonry-layout', 'isotope': 'isotope-layout', 'src': path.resolve(__dirname, 'src/'), 'assets': path.resolve(__dirname, 'src/assets/'), 'components': path.resolve(__dirname, 'src/components/'), 'pages': path.resolve(__dirname, 'src/components/pages/'), 'img': path.resolve(__dirname, 'src/assets/img/'), } }, output: {chunkFilename: mix.inProduction() ? 'js/[name].[chunkhash].js' : 'js/[name].js'} }); // Setup Autoprefixer mix.options({ postCss: [require('autoprefixer')(),] }) // ===public path mix.setPublicPath('./') mix.js('src/main.js', 'dist/') ``` - Vue.js version: 2 - consumed using: (browserify/webpack/rollup) webpack

Cannot read property of undefined when adding translations to header column that has options in listColumns #926

Company

Community

Support

Connect