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}}
Related
I've tried to override VueJS component method from another component.
Here I want to override checkForm method from another VueJS file.
inside ./src/components/auth_form.vue:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {...},
methods: {
checkForm: function(e: any) {
console.log('Please override this method!')
}
}
})
</script>
I want to override this method from ./src/views/signup.vue:
<script lang="ts">
import Vue from 'vue'
import authForm from '../components/auth_form.vue'
export default Vue.extend({
name: 'signup',
components: {
authForm
},
data: function() {...},
methods: {
// This does not override the method above!
checkForm: function(e: any) {
console.log("success")
// Reset the form
this.signupForm = {} as SignupForm
}
}
})
</script>
Yes they will not override because the 2 functions are in 2 different scopes. They can have same name and works independently. In order to do what you want, you have to put the checkForm function of auth_form inside its props.
So in auth_form:
props: {
checkForm: {
type: Function,
default(e) {
console.log('Please override this method!')
}
}
}
then when calling it in signup.vue
<auth-form :check-form="checkForm" /> //pass parent's method into children props
methods: {
checkForm() {
console.log("success") // this will override the default one
}
}
I am trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.
I tried out some solutions from here, but didn't help:
Vue.js: Import class with function and call it in child component
https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266
This is what I tried so far, any ideas?
I have a helper class myHelper.js:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
I have a Vue component MyComponent.vue:
<template>
<v-text-field :rules="[myRule]"></v-text-field>
</template>
<script>
import myHelper from './myHelper.js';
export default {
name: 'MyComponent',
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>
You are not really exporting the class. It is a plain object. To export a class instead of an object do this:
// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}
Also, you do not need:
components: {
myHelper,
},
Rest of the code stays the same.
I'm trying to use vue-async-data to fetch data asynchronously before rendering my Vue component, but I'm having no success. I'm not getting any erros, but it simply doesn't work.
Here's my main.js code:
import Vue from 'vue'
import VueAsyncData from 'vue-async-data'
import router from './router'
import App from './App.vue'
Vue.use(VueAsyncData)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
And here's my App.vue code:
<template>
<div>
{{ msg }}
<navigation wait-for="async-data"></navigation>
</div>
</template>
<script>
import Navigation from './components/Navigation.vue'
export default {
name: 'app',
components: {
Navigation
},
data: function() {
return {
msg: 'not loaded yet...'
}
},
asyncData: function (resolve, reject) {
// load data and call resolve(data)
// or call reject(reason) if something goes wrong
setTimeout(function () {
// this will call `vm.$set('msg', 'hi')` for you
resolve({
msg: 'hi'
})
}, 1000)
}
}
</script>
The msg value doesn't change at any moment, but the component is still rendered.
Am I missing somenthing?
As Bert Evans stated, vue-async-data doesn't work with Vue 2.0.
I used vue-router and the created function to achieve what I needed (as suggested in: https://router.vuejs.org/en/advanced/data-fetching.html.
<template>
<div>
<div class="loading" v-if="loading">
Loading...
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<navigation v-if="currentUser"></navigation>
</div>
</template>
<script>
import Navigation from './components/Navigation.vue'
export default {
name: 'app',
components: {
Navigation
},
data: function() {
return {
loading: true,
error: false,
currentUser: null
}
},
created: function() {
this.fetchUserData()
},
methods: {
fetchUserData: function() {
this.$http.get('/Account/CurrentUserInfo').then(data => {
this.currentUser = data
this.loading = false
}, response => {
this.loading = false
this.error = true
});
}
}
}
</script>
I have a component which adds a class for an animation after 5 seconds
export default Ember.Component.extend({
tagName: 'div',
classNames: ['gears'],
isVisible: false,
_startTimer: Ember.on('didInsertElement', function () {
var _this = this;
this._visibleTimer = Ember.run.later(this, function () {
_this._visibleTimer = null;
_this.set('isVisible', true);
}, 5000);
}),
_endTimer: Ember.on('willDestroyElement', function () {
if (this._visibleTimer) {
Ember.run.cancel(this, this._visibleTimer);
}
})
});
<i class="fa fa-cog fa-fw big {{if isVisible 'fa-counter'}}"></i>
My Problem is that in a specific a Route i need to set isVisible: true
I know that in Ember we can access by the route to the controller by setUpController but what if i want to set isVisible: true for a Component?
If this is not possible , are there other ways to achieve it? Maybe inside the component itself?
This sounds like a problem that could be resolved through Ember.Service. You can go about it in a couple ways, but the more straightforward might be to inject the service into the component and bind isVisible.
Something like:
export default Ember.Service.extend({
isVisible: false
});
export default Ember.Component.extend({
visibility: Ember.inject.service(),
isVisible: Ember.computed.alias('visibility.isVisible')
});
export default Ember.Route.extend({
visibility: Ember.inject.service(),
afterModel() {
this.set('visibility.isVisible', true);
}
});
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.