Aurelia not updating value of object in array

Question

I have an array of objects called options and each option object has a boolean called showThis. In my html, I am using a repeater over the options array, and I'm binding a checkbox to the showThis property. I need to update the value of showThis in a method, so that I can trigger a save whenever the value changes. However, absolutely no matter what I do, the value on screen will not update to reflect changing the value of showThis in my method. Updating the value does nothing, and also using splice() does nothing.

Here is my html:

        <div class="row" repeat.for="option of options">
            <div class="col">
                <div class="form-group">
                    <div class="form-check">
                        <input click.delegate="checkChanged(option, $index)" checked.bind="option.showThis" type="checkbox">
                        <label class="form-check-label">
                            ${option.friendlyName}
                        </label>
                    </div>
                </div>
            </div>
        </div>

Here is my (current version) checkChanged method:

checkChanged(option, optionIndex){
    let self = this;
    option.showThis = !option.showThis;
    self.save();
}

I have also tried this version using splice(), with no change:

checkChanged(option, optionIndex){
    let self = this;
    self.options.splice(optionIndex, 1);
    option.showThis = !option.showThis;
    self.options.splice(optionIndex, 0, option);
    self.save();
}

Maxim Balaganskiy · Accepted Answer · 2018-03-26T23:53:24.863

click.delegate reverts the change after an input updates the value. To track changes you can add a change.delegate to the parent div.

<div change.delegate="save()">
  <div class="row" repeat.for="option of options">
    <div class="col">
      <div class="form-group">
        <div class="form-check">
          <input checked.bind="option.showThis" type="checkbox">
          <label class="form-check-label">
            ${option.friendlyName}
          </label>
        </div>
      <div>
    </div>
  </div>
</div>

This will call save on change events fired by all elements, not just checkboxes. If this is undesirable you can move the delegate to specific elements.

Aurelia not updating value of object in array

1 Answers1