Array is not updating when i used push method

Hello everyone. I ran into the problem that when I push something into an array (array updating), the each loop is not updated and the array remains what it was. I also tried to use @tracked decorator from glimmer/tracked but it didn’t help.

purchases.hbs:

{{page-title "Purchases"}}

<div class="purchases">

<h3 class="a-p">Add Purchase</h3>

<div class="input-field">
    {{input placeholder="Purchase Name" type="text" class="validate" value=pname}}
    {{input placeholder="Purchase Price" type="text" class="validate" value=pprice}}
</div>

<a class="waves-effect waves-light btn" {{on 'click' this.addPurchase}}>Add Purchase</a>

<h3 class="m-ps">My Purchases</h3>

{{#each purchases as |purchase|}}
    <strong>{{purchase.id}}</strong>
    <div>{{purchase.name}}</div>
    <div>{{purchase.price}}</div>
{{/each}}

</div>

purchases.js:

import Controller from '@ember/controller';
import { action } from '@ember/object';

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

export default class PurchasesController extends Controller {
    purchases = [];

    @action
    addPurchase() {
        var pname = this.pname;
        var pprice = this.pprice;
        this.purchases.push({ id: getRandomInt(0, 999), name: pname, price: pprice });
    }
}

2 posts - 2 participants

Read full topic