I have a component which has two functions in it. One function returns an array of objects while the other receives it as a parameter. Both the functions being in the same component.
Example Code:
export default class Test extends Component {
func1 () {
return arrayofobj
}
param = this.func1();
func2 (param) {
param.id
}
}
So, my question is. How can we pass and access the array of objects to "func2" i.e. param.id
Also, I do not want to use state or props in this case.
You do not really understand what a class and component are. Try to learn about it here: https://facebook.github.io/react/docs/react-component.html
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes
Related
Is there a way in Vue2 to do this:
....,
computed {
...mapState('myModule', {
myVal: (state, vm) => state.someVar.filter((_) => { return vm.someVar })
})
},
....
The actual function I'm working on is filtering the state.someVar in a more complex scenerio, so this is simplified. The point being that this is undefined.
Anyone know how to reference the vue in such a function?
The 2nd argument to the mapState function is supposed to be a state mapper (array or object)
If you are using an object (as you are), you can only set the properties of the object to the keys in your "myModule" state object. You cannot set them as functions
e.g {customName: moduleStateKey}
As for passing component instance, you can only do that in an action or mutation. However, that would make your store impure. It would be better to pass someVar to state via a mutation fired from the component, then use a getter for the filter logic and use the someVar passed to state there
I want to know what is the difference in VueJs between these two types of declaration :
data() {
return {
foo = 'bar'
}
}
and this :
created() {
this.foo = 'bar'
}
I know that I an access both using 'this' in or in methods.
Also, if the returned object in data() is saved in "memory" of the component, where does the object declared in created() is saved? are they in different scopes?
Also, I know that to fetch data, the fetcher lands in created() and then updates the data object, but this question is specifically about the differences between the two ways of declarations i mentioned
Is there any differences in the background?
You can read more about vue data here.
Vue will recursively convert its ($data) properties into getter/setters to make it “reactive”..
created() {
this.foo = 'bar'
}
Declaring like above, you won't be able to watch the attributes.
You can check this example out, watch function isn't fired with the attribute being not defined in data()
There are couple of questions related computed properties like the following
"vuejs form computed property"
"Computed properties in VueJs"
"computed property in VueJS"
"Use computed property in data in Vuejs"
They are asking about specific error or logic. There are lot of websites that are explaining about vuejs related concepts. I read about computed properties on vuejs official website. When we do complex calculations or want to avoid to write more logic in our html template then we use computed properties.
But could not get any solid understanding about computed properties, when it calls, how it calls, what exactly do?
TL;DR: Computed properties are getters/setters in Vue.
When defined in the shorthand form, they are getters:
computed: {
someComputed() {
return `${this.foo} ${this.bar}`;
}
}
is equivalent with
computed: {
someComputed: {
get: function() {
return `${this.foo} ${this.bar}`;
}
}
}
which can also have a setter:
computed: {
someComputed: {
get: function() {
return `${this.foo} ${this.bar}`;
}
set: function(fooBar) {
const fooBarArr = fooBar.split(' ');
this.foo = fooBarArr[0];
this.bar = fooBarArr[1];
}
}
}
In short, Vue computed properties allow you to bind an instance property to
a getter: function run when you look up that property; usage:
this.someComputed // returns the computed current value, running the getter.
a setter: function run when you attempt to assign that property; usage:
this.someComputed = value; // sets the computed current value, running the setter.
Read more on getters and setters in Javascript.
And here's the documentation on Vue computed properties.
You can use computed properties when for example you have some logic what will blow up your template.
The idea is, that normally you want to keep all javascript logic in the javascript side of your vue component, and only access final data in your data (if possible)
For that you can use computed props, which normally are doing simple things like:
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
Or an another good example if you have some currency and you want to format it with thousand separator and euro ign at the end.
Then you can access your computed prop in the template like you access a normal prop, you dont have to call it as a function.
like so:
<div>{{reversedMesage}}</div>
Every time, when any variable what is used in your conputed prop is changing, vue vill take care of it and will re-calculate your computed property again.
Lets say you have the following:
computed: {
prettyAmount: function () {
return this.amount + ' ' + this.currency.toUpperCase()
}
}
<div>{{prettyAmount}}</div>
Whenever currency or amount changes, the output of prettyAmount will be changed as well.
The setup is really simple, assume this piece of code:
export default class App extends WidgetBase {
protected render() {
return v('div', [
w(MyCustomWidget, {}),
v('button', {
id: 'abc',
classes: ['btn', 'btn-primary'],
onclick: this.clickMe
}, [
'Hello World!'
])
]);
}
}
The class MyCustomWidget defines now a function which I want to call from the current App-widget. If I do let cw = w(MyCustomWidget, {}) I get an object with the key instance which contains exactly what I want. But if I use cw.instace TypeScript tells me, that Property instance does not exist on type 'WNode<MyCustomWidget>'.
So how to do it properly?
I reached out to the guys from Dojo2 and they responded to me very quickly with:
If you want a child widget to call a function from the parent you need pass it to the child as a property. In dojo the widget instance are never exposed.
This was also my workaround but I was not sure if this was the correct way to do it. It certainly works. Now we know.
I have a class with #observable properties and can react to local observable changes OK. The class also makes use of a third-party library that has a method OrderBookSnapshot() which returns a snapshot of the most recent array, but is not observable. I gather that I cannot assign non-observable arrays to the observable property. But is there a way to observe non-observable arrays from another library without making that library observable itself?
export class MyOrderBook {
#observable
private offerBook: any[]
private cmeClient // third-party class
constructor(symbol: string[]) {
this.offerBook = []
this.cmeClient = new cmeClient.OrderBook(symbol[0])
}
// Calls third-party method and returns updated array
UpdateOrderbookSync() {
// This is not observable
this.offerBook = this.cmeClient.OrderBookSnapshot()
}
}
Adding potential solution to my answer. The #action.bound decorator appears to give the desired result. Though it is not clear if this is the best way to update an observable array, since most of the array is unchanged.
#action.bound
UpdateOrderbookSync() {
// This is not observable
this.offerBook = this.cmeClient.OrderBookSnapshot()
}