We Keep Coding

Is it possible to return a value of an inner object of the wrapper object in Vuex getter before mounting?

I am currently working with Vuex and VueJS, and I got stuck in a problem with the Computed property.
In a nutshell, I have an object which has an inner object in Vuex state, try to access the key of the inner object in Vuex getter to return the value, and render it in a component. However, I get an error like "cannot read property id of undefined".
I think there are two important points to the problem.
The first one is that I can render the value if I put the value into a variable of the data option in mounted() with using the settimeout() method.
The second point is that I can access a key of an object, return the value in Vuex getter, and render it in a component correctly.
I would like to know if it is possible to return the value of an object in the wrapper object in Vuex getter to render it before mounting a component.
It would be great if you could answer my question. Thank you in advance.
Sample code of Vuex getter

According to the error, you don't have the _user property when you are trying to access it via vuex getter. I think you are fetching it from and API, as i understood.
On your state, set profile as empty/nested object with all fetchable properties to get rid of errors.
Like;
const state: {
profile: {
_user: { _id: null }
}
}

Difference in property binding for custom component in Ember V/s Angular

In Angular, if we want to bind a property from outside for a custom component, we have to use "#Input" to kind of allow that property to be set from outside (i.e. from consuming component template)
Does EmberJS also have some sort of similar mechanism OR does it allow binding directly from the template (hbs) without adding/marking anything in the component JS? Is there any difference when it comes to Ember Octane V/s the earlier versions of Ember?

yes it allows binding from outside the component without adding anything to the component js
in the component hbs file
<p>{{#attribute}}</p>
from outside
<MyComponent #attribute="attributeValue"/>
also you can get the binded attribute from component js
#tracked mycomponentAttribute = this.args.attribute;
in the component hbs file
<p>{{this.mycomponentAttribute}}</p>

no you don't necessarily have to add the input tag but you have to declare the property inside the component you are trying to pass the property to.
{{#each model as |post|}}
{{blog-post title=post.title body=post.body}}
{{/each}}
the blog-post component, define a property named title and this should work.

What causes Vue props to equal [object Object] in the DOM?

While inspecting the DOM for a Vue app in the Chrome console, I noticed there was an element with the attribute content=[object Object]. In the code, it's because that component was passing an object as a content prop to its child, and for some reason this was showing up in the DOM.
The component in question:
<custom-component :content="obj" />
I inspected other areas of the code that are also passing object props down to their children, and noticed that those props were absent from the DOM. Unfortunately, I could not find any significant differences that could be responsible for the discrepancy. Since I am trying to also hide content=[object Object] from the DOM, I was wondering what in Vue determines this behavior?
I tried to reproduce the behavior in this jsfiddle. However due to my question I can't figure out how to properly do that, and the content prop is absent from the DOM there. Any help would be greatly appreciated.

This is most likely because you haven't defined it as a prop on the relevant component. If it isn't defined as a prop then it'll just be converted to a string and added as an attribute to the outermost element of the component.
If your component does define this prop then check its template to see whether it is adding this attribute to its outermost element itself. If it's calling out to some other component at the root of the template then you'll similarly need to check whether that component defines this prop.

The dom will register the prop as [object Object] if the component hasn't been registered properly, ie
import ExampleComponent from '...'
export default {
components: { ExampleComponent },
}

VueJS Error on sharing data from one component to other

I'm getting some errors in my VueJS application. IMG - http://prntscr.com/exh499
I understand that error exist because country property doesn't exist before I load data from weather JSON, but what is the way to remove this error. Also above [Vue warn]:
This is the GitHub repo, there is a bit more code so I'm not sure if you can read it here.
https://github.com/DenisLapi/weather-app
Also how to look for changes of some property in Component 2 if I edit that property in Component 1 (I'm usign $emit) but when I define property value in Component 2 and then edit that property in Component 1, usign $emit and props[] seems like value is not updated in Component 2
[Vue warn]: Error in render function : (found in <SearchResult> at C:\Users\denis\Desktop\weatherapp\src\components\Result.vue)
TypeError: Cannot read property 'country' of undefined

citydata.foo is undefined, which is fine, but citydata.foo.bar is an error since you're trying to get bar off undefined.
You should wrap everything using citydata with a v-if since it's async.
<div v-if="citydata">
<!-- Now you can use `citydata` safely. -->
</div>

Edited: fiddle with a working example https://jsfiddle.net/wostex/63t082p2/24/
BTW, there is no 'country' property in JSON output: example
You can
set default values for your props: https://v2.vuejs.org/v2/guide/components.html#Prop-Validation
check properties presence before using them in templates (v-if on content blocks)
About reaction on props change: use computed property which depends on prop value, or even watch prop changes: https://v2.vuejs.org/v2/guide/computed.html#Watchers (it depends on your needs)

Ember.js - Model inside component

I am making an app just for practice and i have a doubt in a component's function "didReceiveAttr". When i pass my MODEL in my template and then i erase some element in it the function doesnt work, but if i pass "model.length" in the template and then erase something the function work!
My component template
<h1>Tasks ({{totalTask}})</h1>
My component JS
totalTask: null,
didReceiveAttrs(){
this._super(...arguments);
this.set('totalTask', this.get('model.length'));
console.log(this.get('model'));
}
My primary template
{{task-list model=model}}
or
{{task-list model=model.length}}

This is indeed the expected behavior; just look at Ember guide about how didReceiveAttrs works. It is clearly stated that "didReceiveAttrs hook is called every time a component's attributes are updated". When you add to or remove from an array the array itself does not change; hence didReceiveAttrs is not executed. It is only executed when the initial assignment to model is performed.
I prepared this twiddle to illustrate you a better ember way to handle this case. You should rely on computed properties as much as you can; hence I added computedTotalTask as a computed property to my-component.js and it relies on model.length as you can see.

{{task-list modelLength=model.length}}
Here you are assigningmodel.length as modelLength property to the component. so initially didReceiveAttrs will be called as component is receiving modelLength property and when you add one more element to model then modelLength property itself changed so this will invoke didReceiveAttrs before re-render.
{{task-list modelTaskList=model}}
Here modelTaskList is pointing to array, so when you add/remove item through KVO compliant method such as pushObject it will be reflected in component too. but the modelTaskList is still pointing to the same array so didReceiveAttrs hook will not be called.
Suppose if you assigned different array then you can see the didReceiveAttrs is called.

You could always just set this as a computed property, ensuring updates in the event of the bound variable being updated.
Within your component, set up a computed property that will watch for a change to your model, then update the variable modelLength with the change
modelLength: Ember.computed('model', function(){
return this.get('model').length;
}
Then, within your handlebars template, reference this length
<h1>Tasks{{#if modelLength}} ({{modelLength}}){{/if}}</h1>