In my child component I have two functions:
methods: {
tutu: function () {
...
},
openMenu: function () {
...
}
}
In my parent component, I'm trying to execute each of these functions in reaction to different events:
methods: {
openMenu: function () {
this.$refs.main_menu.openMenu();
},
handleResize: function () {
this.$refs.main_menu.tutu();
}
},
The first call (this.$refs.main_menu.openMenu()) works fine, but the second one fails with this error message:
TypeError: Cannot read property 'tutu' of undefined
In my parent component, console.log(this.$refs) shows both functions the same way. EDIT: console.log(this.$refs.main_menu) shows undefined.
I cannot understand why one of them works and not the other if everything is the same for both.
main_menu: VueComponent
...
openMenu: ƒ ()
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
length: 0
name: "bound openMenu"
...
tutu: ƒ ()
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.invokeGetter (<anonymous>:2:14)]
length: 0
name: "bound tutu"
__proto__: ƒ ()
$refs will only be populated after a component is mounted. So if you try to access a ref prior to that, for example from a created hook, it won't be there.
There are other ways that a ref can be missing. For example, if you're using v-if and the condition is false. In that case it isn't sufficient to wait for the condition to become true, you would also need to wait for a rendering update to be performed and such updates are queued. In that case you'd either need to use the updated hook or a call to $nextTick.
Related
I have the following function being passed as an emit to the component:
setTray(tray, pk) {
alert(tray)
alert(pk)
},
Calling inside a component, I am able to reach the function, but not the arguments:
setup(props, ctx) {
ctx.emit('setTray', 'profile-task', pk)
ctx.emit('setTray', {tray: 'profile-task', pk: pk})
}
Both approaches result in the arguments being undefined when setTray() is executed. What is the correct syntax in this situation?
The emit function accepts one or two arguments, the event name and the payload which in your case should be defined as object :
ctx.emit('setTray', {tray: 'profile-task', pk: pk})
in parent :
setTray({tray, pk}) {//destruct the payload
alert(tray)
alert(pk)
},
or in old way :
setTray(payload) {
alert(payload.tray)
alert(payload.pk)
},
Recently I looked up Polymers app-localize-behavior and I saw they typed the localize() method as Function (see on GitHub):
excerpt from app-localize-behavior.html:
localize: {
type: Function,
computed: '__computeLocalize(language, resources, formats)'
},
This method works perfectly fine in data-bindings, like <div>{{localize('welcome')}}</div>, but how can I call this method from my elements properties? I try to do something like:
excerpt from my-element.html:
properties: {
_pageTitle: {
type: String,
value: this.localize('welcome')
}
}
But when I try this, I get a Uncaught TypeError: this.localize is not a function. Even in my ready method I need to call this.localize asynchronously as otherwise it isn't defined, too.
How could I solve that problem?
Thank you in advance!
Use a computed property that invokes localize(...):
properties: {
_pageTitle: {
computed: 'localize("welcome")'
}
}
demo
What is the difference between returning an action vs returning the whole function in Page Object?
this.download = function() {
element(by.id('modal-download-button')).click();
return this;
};
VS
this.download = function() {
return element(by.id('modal-download-button')).click();
};
Sometimes, to tackle timing and syncing issues, you want to explicitly resolve a promise returned by click(). In this case returning the "click" promise makes sense:
pageObject.download().then(function () {
// ...
});
Returning a full page object could be useful for chaining page object methods:
pageObject.download().get().verify();
To facilitate a JsonRest store with a non-standard url scheme, I am trying to inherit JsonRest and override the _getTarget(id) function. Here is what my inherited javascript class looks like:
define([
"dojo/_base/declare",
"dojo/store/JsonRest",
],
function(declare, JsonRest) {
return declare(JsonRest, {
_getTarget: function(id){
var target = this.target;
if(typeof id != "undefined"){
if(target.indexOf("{id}") != -1) {
//use template
target = target.replace("{id}", id);
} else {
target = this.inherited(id);
}
}
return target;
},
});
});
However the line target = this.inherited(id); returns an error: Uncaught TypeError: Cannot read property 'callee' of undefined.
I looked at the docs, and I think I am doing it right:
http://dojotoolkit.org/reference-guide/1.10/dojo/_base/declare.html#calling-superclass-methods
What is the proper way to call the base class's _getTarget(id) function?
If you look closely the part of the documentation you linked, you are supposed to literally pass the arguments object to this.inherited - that's what contains the callee property it is looking for (and will include the id and any other arguments anyway, to be passed along to the superclass).
A few paragraphs in, the documentation also explains how to call this.inherited with arguments other than the same ones passed, if necessary: you can pass custom arguments in an array after arguments, i.e. this.inherited(arguments, [ ... ]). arguments always has to be first.
I'm developping an hybrid application with Worklight Ibm, using sencha touh for UI.
in my controller i'm calling an HTTPAdapter like this:
var invocationData = {
adapter : 'UserHttpAdapter',
procedure : 'getPersonneMorale',
parameters : []
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : function() {
console.log('Signed in.');
var loginView = this.getLoginView();
mainMenuView = this.getMainMenuView();
loginView.setMasked(false);
Ext.Viewport.animateActiveItem(mainMenuView, this
.getSlideLeftTransition());
},
onFailure : function(){
console.log('failure');
},
});
but i'm getting this error:
07-07 11:43:45.812: E/NONE(31172): [http://<domain>:<port>/WLErsalMobileTest/apps/services/api/ErsalMobileTest/android/query] exception. TypeError: Object #<Object> has no method 'getLoginView'
07-07 11:43:45.832: D/CordovaLog(31172): file:///android_asset/www/default/worklight/worklight.js: Line 3333 : Uncaught TypeError: Object #<Object> has no method 'getLoginView'
07-07 11:43:45.832: E/Web Console(31172): Uncaught TypeError: Object #<Object> has no method 'getLoginView':3333
When i'm executing the code:
signInSuccess : function() {
console.log('Signed in.');
var loginView = this.getLoginView();
mainMenuView = this.getMainMenuView();
loginView.setMasked(false);
Ext.Viewport.animateActiveItem(mainMenuView, this.getSlideLeftTransition());
},
without calling the adapter it works.
Can you help me please!
Thank you
Try doing the following:
WL.Client.invokeProcedure.apply(this, [invocationData, callbackFunction])
where callbackFunction is the callback you have above. I think the problem is that the variable 'this' is not specified in the callback context, so by using apply, you are specifying that 'this' should be the value that you are specifying. Try that and see if it works, although I am not sure if it will solve your problem because I do not know if it will use the given 'this' in the callback function.