How can i access to data values inside itself in vue.js?
Code:
data: function(){
return {
foo: 123,
bar: this.foo
}
}
In this case I got undefined
There are several options I see:
data: function(){
const data = {
foo: 123
};
data.bar = data.foo;
return data;
}
or
data: function(){
const data = {
foo: 123
};
return {
...data,
bar: data.foo
};
}
You've got undefined because of this.foo refers to function(){`s context, not object`s context.
Related
const test = ({ foo = 'foo', bar = 'bar' } = {}) => {
return { foo, bar };
};
test(); // { foo: 'foo', bar: 'bar' }
test({}); // { foo: 'foo', bar: 'bar' }
test({ foo: 'cat' }); // { foo: 'cat', bar: 'bar' }
But if i rewrite it in TS
const test = ({
foo = 'foo',
bar = 'bar',
}: { foo: string; bar: string } = {}) => {
return { foo, bar };
};
= {} will cause error because of type mismatch (but as we see in first example — there is no undefined params and should be no type mismatch).
How to rewrite JS example in TS properly?
try this in your ts file :
const test = ({
foo = 'foo',
bar = 'bar',
}: { foo?: string; bar?: string } = {}) => {
return { foo, bar };
};
Method:
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {
baz() {
return this.foo
}
}
}
a.bar() this which refers to a which is what I want. I'm looking for a way for the child method inside a.lol.baz to also have this refer to a. Is there anyway to do it?
You can't refer to it directly. But you can bind the function to the object explicitly, then this will be available.
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {}
}
a.lol.baz = (function() {
return this.foo
}).bind(a);
console.log(a.lol.baz());
you can use a.lol.baz.call(a) function
a = {
foo: 1,
bar() {
return this.foo + 1
},
lol: {
baz() {
return this.foo
}
}
}
var res=a.lol.baz.call(a)
alert(res)
I have something like this:
var yourNamespace = {
foo: function() {
.....
},
bar: function() {
function foobar() {....
}
}
};
Is there a possibility to call inside of foo, the foobar function inside of bar?
With your exact structure you cannot however you can do something like that :
var yourNamespace = {
foo: function() {
.....
yourNamespace.foobar()
},
bar: function() {
function foobar() {....}
yourNamespace.foobar = foobar;
}
};
Or nicer, (IMO) :
var yourNamespace = {
foo: function() {
.....
yourNamespace.bar.foobar()
},
bar: function() {
yourNamespace.bar.foobar = function() {....}
}
};
Please note: in both case, bar() must run before foo() otherwise foobar is undefined
This is just a simple Module pattern. What you should do is make bar it's own module, and return foobar from that module. Example:
var yourNamespace = {
foo: function() {
this.bar.foobar();
},
bar: {
abc: '',
foobar: function() {
console.log('do something');
}
}
};
Or you could do something more like this:
var yourNamespace = {
foo: function() {
var bar = this.bar();
},
bar: function() {
var abc = '';
function foobar() {
console.log('return abc or do something else');
return abc;
}
return {
foobar: foobar
}
}
};
How can I just update one part of a mapped model?
var model = { foo: { bar: "hello" }, moo: { la: "world" }};
var mapped = ko.mapping.fromJS(model);
Mapping results in:
mapped =
{
__ko_mapping_object__ : object,
foo: {
bar : function c()
},
moo: {
la: function c()
},
__proto__ : object
}
Since foo and moo aren't observable, if I do:
mapped.foo = { "bar" : "changed" };
or
mapped.foo = ko.mapping.fromJS({ "bar" : "changed" });
The object is updated but rebinding is not triggered.
Any ideas? I need binding to happen on updating a one part of the model.
One idea I had was to crawl the partial model and then force rebind.
triggerObjectRebind(mapped.foo);
function triggerObjectRebind(model) {
for (var property in model) {
if (model.hasOwnProperty(property)) {
if (typeof model[property] === "object") {
triggerObjectRebind(model[property]);
} else if (typeof model[property] === "function") {
model[property].valueHasMutated();
}
}
}
}
When you do updates, you need to pass in the mapped object as a parameter. Corresponding properties will be updated.
var model = {
foo: { bar: "hello" },
moo: { la: "world" }
};
var mapped = ko.mapping.fromJS(model);
var newFoo = { bar: "changed" };
// do the update on the foo object
ko.mapping.fromJS(newFoo, {}, mapped.foo);
I'm intending to write a module that can be instantiated with default configuration and then overridden with custom configuration when initialized. The configuration object has nested objects, so I need to traverse over these nested objects if they are included in the custom configuration. I am attempting to do so by calling customize recursively. This works for the first nested object but the traversal ends after that object. Why is this and what can I do to fully traverse an object containing nested objects?
function Config(options) {
function customize(conf) {
if (conf && conf.constructor === Object) {
for (var prop in conf) {
if(conf[prop].constructor === Object) {
return customize.call(this[prop], conf[prop]);
} else {
if (this.hasOwnProperty(prop)){
this[prop] = conf[prop];
}
}
}
} else {
console.error('The first argument must be an object.');
return;
}
}
//Default config values
this.foo = 'default';
this.bar = {
foo: 'default'
};
this.baz = {
foo: 'default'
};
//Overide default config with custom config
if (options && options.constructor === Object) {
customize.call(this, options);
}
}
function TestModule(){
this.init = function(options){
this.config = (options && options.constructor === Object) ? new Config(options) : new Config();
return this;
};
}
console.log(
new TestModule().init({
foo: 'custom',
bar: {foo: 'custom'},
baz: {foo: 'custom'}
}).config
);
//RESULT
// {
// foo: 'custom',
// bar: {foo: 'custom'},
// baz: {foo: 'default'}
// }
This line:
return customize.call(this[prop], conf[prop]);
occurs inside a for loop, so you are returning before each item has been iterated over. Your return statement should be outside the loop.