Ember - computed property (which is an array) not taking updated value upon adding items to array

Question

Am working on ember app (1.11) and having an issue with computed property not taking updated value when its updated in code . Code as below (have trimmed down, only showing relevant snippet).

Am showing a list of things on UI when iterating through "data" which is a computed property. Then I make a selection from drop down, I am sending a action, triggering that computed property and adding things to that list. When I do this once, I get all the updated list or iteration on UI, but when I do the selection again to increase the list/iteration, the computed property is taking the initial value of list, not the updated one, where I just added one more item, hence not showing correct details.

I am not getting what's going wrong. I could not create a twiddle as well, as its a lot of code and got stuck in error in twiddle.

Parent Component- ehbs

{{pax-detail list=list}}

Parent Component - js

list: function(){
  return this.get('arr')   //This arr comes from route/controller via query string in url
}.property('arr')

Pax Detail Component- ehbs

{{pax-select action="changed"}}
{{ages ageData=data}}

Pax Detail Component - js

countChanged: '',
actions: {
 changed: function(e){
  this.set('countChanged',e.target.value)
 }
},
data : function(){
  var arr = this.get('list')
  // doing lot to manipulation - constructing arr/object


if(this.get('countChanged')){
  arr.pushObject({}) // basically modifying the initial arr
  return arr
} else {
  return arr
}

}.property('list','countChanged')

Pax Select Component - ehbs

<select>
 <option>0</option>
 <option>1</option>
 <option>2</option>
</select>

Pax Select Component - js

change: function (e) {
   this.sendAction('action',e)
 }

Are you sure you want to use a computed property here? You shouldn't be using a computed property with the intention of modifying it, or the result and expecting the property to update itself properly going forward. — J__
So, what should I be using. I thought, computed property is good for this. The idea is to display a list of things, which I am taking from a computed property, as it returns an array. And then when something changes, I need to add item to that array (client side, no page refresh or ajax) and expect the UI to update and show that value. — whyAto8
Can you please elaborate? I didn't get that. How will the list update automatically as I add item. — whyAto8
The list property is listening to 'arr'. So it will update when you modify it. Also, try 'arr.[]' — J__

Vasiliy Vanchuk Vasiliy Vanchuk · Accepted Answer · 2016-07-14T20:31:04

Your arr doesn't change if your example ( Changes it's content, but the array is the same )

Try next forms .property('arr.[]') or .property('arr.length')

or call .notifyPropertyChange('list') manually on modifying data. In fact your example is just list: Ember.computed.alias('arr')

Ember - computed property (which is an array) not taking updated value upon adding items to array

2 Answers