Expression on Lightning Component not working on production

Question

I built a component that retrieves a list from the database and then iterate those items applying an attribute onfilter that defaults to true on each record.

Using this little CSS trick I'm able to show or hide elements that are on the filter:

<aura:iteration items="{!v.items}" var="item">
<tr style="{!item.onfilter == true ? '' : 'display: none;'}">
...
</tr>
</aura:iteration>

And it works just fine on Sandbox (Summer 17). But it fails on the production instance (Spring 17). Since no errors are displayed on production, I decided to do a little inspection, and found that every record is being loaded as expected, but the expression is being evaluated as false and thus every record is hidden on the list, even though when I check the console logs, I can see that they all have onfilter set to true.

Does anyone know if this is a bug that is being worked on?

Edit (helper.js code)

This is what happens when I get the result from the database:

var items = response.getReturnValue();
items.forEach(function (item) {
    item.onfilter = true
})
component.set('v.items', items)

Edit 2 (after problem was solved)

This seems to be an issue on instances that are not updated to Summer 17. I'm saying this because on sandbox I've updated the component's version to use API 40, and it is working just fine.

Answer 1

If Locker Service in production is active, you are probably being tripped up by the absence of an implicit getter for the property that you are attempting to read in the iterator.

Define your items array (something) like this:

<aura:attribute 
      name="items" 
      type="Object[]" 
      default="[{'name':'something','onFilter':false}]"/>

This will allow Locker Service to create a getter and hence your object will be accessible