I have a ember helper for string internalization. When accessing helper file from ember controller I got variable undefined error.
t-18n.js
import Ember from 'ember';
var i18nData = {
"dashboard": "Dashboard",
};
export function tI18n(params/*, hash*/) {
var value = i18nData[params];
if(value) {
return value;
}
return params;
}
export default Ember.Handlebars.makeBoundHelper(tI18n);
Ember Controller
import i18n from 'osmizer-client/helpers/t-i18n'
export default Ember.Controller.extend({
actions: {
get: function() {
i18n.tI18n('dashboard')
}
}
});
I got this error "i18n.default.tI18n is not a function TypeError: i18n.default.tI18n is not a function". Please help me to solve this issue.
Related
I have this component in my codebase,
<template>
<v-dialog v-model="modalVisible" content-class="muc-modal" max-width="350" persistent>
<v-card>
<component :is="component"/>
</v-card>
</v-dialog>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from "vue-property-decorator";
import { namespace } from "vuex-class";
const Modal = namespace("Modals");
#Component
export default class AppModal extends Vue {
public component: any = null;
#Modal.State
public modalVisible!: boolean;
#Modal.State
public modalComponent!: string;
#Modal.State
public modalComponentPath!: string|null;
get injectedComponent() {
return this.modalComponent;
}
#Modal.Mutation
public hideModal!: () => void
#Watch('injectedComponent')
onModalComponent(componentName: string) {
if(!componentName) return;
this.component = Vue.component(componentName, () => import(`./${this.modalComponentPath}`));
}
}
</script>
<style scoped lang="scss">
.muc-modal {
width:350px;
max-width:90%;
}
</style>
It is modal component that takes another component, this is run via mutation on the modal store,
import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";
#Module({ namespaced: true })
export default class Modals extends VuexModule {
//#region "State"
public modalVisible: boolean = false;
public modalComponent: string|null = null;
public modalComponentPath: string|null = null;
//#endregion "State"
//#region "Mutations"
#Mutation
public showModal(modalComponent:string, modalComponentPath: string|null = null) {
this.modalVisible = true;
this.modalComponent = modalComponent
this.modalComponentPath = modalComponentPath ? modalComponentPath : modalComponent
}
#Mutation
public hideModal() {
this.modalVisible = false;
this.modalComponent = null;
this.modalComponentPath = null;
}
//#endregion "Mutations"
//#region "Getters"
get getVisibility(): boolean {
return this.modalVisible
}
//#endregion "Getters"
//#region "Actions"
//#endregion "Actions"
}
I am wanting to write some tests that a) test the modal display correctly when showModal() mutation is run, b) that it gets hidden correctly when hideModal() mutation is run.
This is my current test file,
import { shallowMount, createLocalVue } from '#vue/test-utils';
import Vuex from 'vuex';
import Modals from '#/store/modal';
import AppModal from '#/components/AppModal.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('AppModal.vue', () => {
let store: any = null;
//let mutations = modals.mutations
beforeEach(() => {
store = new Vuex.Store({
modules: {
"modals" : Modals
}
})
});
it('shows modal when modalVisible is set to true', () => {
console.log(store);
const wrapper = shallowMount(AppModal, {store, localVue});
// const modal = wrapper.find('.muc-modal')
// console.log(modal);
})
});
running this test I get the following response,
console.error node_modules/vuex/dist/vuex.common.js:916
[vuex] module namespace not found in mapState(): Modals/
console.error node_modules/vuex/dist/vuex.common.js:916
[vuex] module namespace not found in mapState(): Modals/
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in render: "TypeError: Cannot read property 'template' of null"
found in
---> <AppModal>
and i have no clue why, can anyone help shed some light on this for me?
This error -
TypeError: Cannot read property 'template' of null
Is a direct result of this coding error -
<component :is="null" />
Why?
The component tag should never have a null value for the is attribute, even if it's momentary. null isn't a valid component, and Jest correctly finds this error even when you don't see it in the browser.
In your above code, the initial value for the property component (which is probably a bad variable name) is null, so that's where this is coming from. A simple fix would be to set a valid component as an initial value so that it is never null.
I'm trying to import an array into a Vue component:
The (simplified) component:
<script type="text/babel">
const countryCodes = require('./country_codes.js');
export default {
props: [],
data() {
return {
countryCodes: countryCodes
}
},
}
</script>
country_codes.js
(function() {
return ['DE', 'EN']; // This, of course, is way bigger; simplified for readability
});
Both the component and the country_codes.js files are in the same directory, but the countryCodes property is always an empty object.
What am I doing wrong?
I can't tell for what reason your code isn't working. Maybe you just need to export your data from countryCodes.js
So, I am sure this will work
import countryCodes from './countryCodes.js'
countryCodes.js
export const countryCodes = {
return ['DE', 'EN'];
}
I need import some variable to vue component file. I am doing it this way:
require('imports-loader?myVar=>{test:12345}!./my-com.vue');
As result I get [Vue warn]: Error in render function: "ReferenceError: myVar is not defined"
I know about props, but I want pass namely a variable.
Here "my-com.vue":
<template>
<div>...</div>
</template>
<script>
console.log(myVar); // <--- here I get vue warn
export default {
props:['rows'],
...
}
</script>
Importing is from here:
module.exports = function(params){
return function(resolve, reject){
resolve({
components:{
'my-com': require('imports-loader?myVar=>{test:12345}!./my-com.vue')
},
...
})
}
}
Where I am wrong?
How it possible to import a variable to vue component file?
Thanks in advance.
you can use an import statement
<script>
import { myVar } from './path_to_the_file'
console.log(myVar);
export default {
props:['rows'],
...
}
</script>
make sure you use the export statement in the other file to export myVar like this:
export var myVar = 'my variable';
I have a simple demo I wanna try out to learn more about VueJS components. But when I load my page, I receive the error: Unexpected Token Import, in this line
import GISView from './components/GISView.vue';
when I remove this, GISView is not defined. I use Laravel 5.4 and webpack for compiling the scripts. Why is the component not found?
Main.js
import GISView from './components/GISView.vue';
window.Vue = Vue;
window.Event = new class {
constructor() {
this.Vue = new Vue();
}
fire(event, data = null) {
this.Vue.$emit(event, data);
}
listen(event, callback) {
this.Vue.$on(event, callback);
}
};
window.app = new Vue({
el: '#app',
components: {
GISView: GISView
},
data: {
},
methods: {
init: function() {
this.$broadcast('MapsApiLoaded');
}
}
});
GISView.vue
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps]
}
</script>
I really got stuck for hours on this because just by the code, it should work I would say.
You are not using a proper parser like vueify to properly parse .vue files in your webpack/gulp script.
I have a 'test-test' component which include 2 function like below:
import Ember from 'ember';
export default Ember.Component.extend({
myfunction1: Ember.on('init', function() {
alert(123);
}),
myfunction2: Ember.on('init', function() {
alert(1234);
}),
});
On the Application.hbs I call
{{#test-test}}{{/test-test}}
Of course the result will be 2 alert(123) and alert(1234).
What should I do if I want it to init only 1 function such as myfunction1 and do not init myfunction2?
I'd do it that way:
//component/test-test.js
import Ember from 'ember';
export default Ember.Component.extend({
whatToDoOnInit: null,
initFunctions: Ember.on('init', function() {
switch(this.get('whatToDoOnInit')) {
case 1:
alert('123');
break;
//...and so on
}
}),
});
and call it like that:
//template.hbs
{{#test-test whatToDoOnInit=1}}{{/test-test}}
Of course this way you could implement another logic:
export default Ember.Component.extend({
doOneThing: false,
doAnotherThing: true,
initFunctions: Ember.on('init', function() {
if(this.get('doOneThing')) {
alert('123');
}
//...
}),
});
//template.hbs
{{#test-test doOneThing=true doAnotherThing=false}}{{/test-test}}