# Computed property to disable/enable button

**URL:** <https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509>\
**Category:** General\
**Created:** [April 10, 2018, 3:15pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509 "2018-04-10T15:15:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [April 10, 2018, 3:15pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/1 "2018-04-10T15:15:49Z")

</div>

I’d like to enable or disable a button depending on the number of displayed items.

Here is the route:

```auto
# routes/shop_languages.js
model() {
    return RSVP.hash({
      shopLanguages: this.store.query('shop-language', { shop_id: this.get('currentShop.shop').get('id')}),
      languages: this.store.findAll('language')
    });
  },

```

So in a template I display the list of languages associated to the shop:

```auto
# templates/shop_langauges.hbs

<ul class="list-group list-group-flush">
      {{#each model.shopLanguages as |lang|}}
        <li class="list-group-item">
          {{lang.tag}}
          <button type="button" class="btn btn-danger btn-sm" disabled={{isDeleteButtonDisabled}} {{action "deleteLanguage" lang}}>
            <span class="oi oi-trash"></span>
          </button>
        </li>
      {{/each}}
    </ul>

```

I hoped to be able to call the computed property defined s follows in `shop_languages.js` controller:

```auto
# controllers/shop_languages.js

  isDeleteButtonDisabled: computed('model.shopLanguages', function() {
    let langs = this.get('model.shopLanguages');
    console.log('langs: ' + langs.get('length'));
    return langs.get('length') < 2;
  }),

```

The console displays correctly the number of languages. But it does not work:

- the delete button is always displayed
- when I change for another shop, there is nothing displayed in the console, as if the CP has never been called.

What is wrong with that ? Is the syntax is correct ? I’ve just deleted 3 extra languages (there were 4 ones), came back to the shop and, - strange, → the button was disabled. Why so ? Caching os smth else ? Thank you.

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [April 10, 2018, 3:22pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/2 "2018-04-10T15:22:19Z")

</div>

Computed property observers can be tricky, especially when dealing with arrays. What you have here:

```auto
isDeleteButtonDisabled: computed('model.shopLanguages', function() {

```

Is telling Ember “look at the model.shopLanguages object” which is a record array. However Ember doesn’t necessarily infer that it needs to look at the length specifically. You should have the following instead:

```auto
isDeleteButtonDisabled: computed('model.shopLanguages.length', function() {

```

One easy way to help think about this is that if you reference a property in the CP, it likely needs to be watched by the CP. In this case you get model.shopLanguages, but then in the next line you also get the length, so you should include the length in your observer path.

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [April 10, 2018, 3:26pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/3 "2018-04-10T15:26:01Z")

</div>

Really grateful ! Thanks a lot for your response, frankly I didn’t believe that one could pass in `model.shopLanguages.length` as an observed stuff to the CP. Thank you!

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [April 10, 2018, 3:51pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/4 "2018-04-10T15:51:52Z")

</div>

An alternate to observing length is `[]`: [Computed Properties and Aggregate Data - The Object Model - Ember Guides](https://guides.emberjs.com/v3.0.0/object-model/computed-properties-and-aggregate-data/#toc_code-code)

```nohighlight
isDeleteButtonDisabled: computed('model.shopLanguages.[]', function() {}

```

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [April 10, 2018, 3:53pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/5 "2018-04-10T15:53:09Z")

</div>

Thank you for your response. I’ll take a note of that tip as well.

---

<div class="post-metadata">

**Author:** ![Panman8201](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/panman8201/32/17727_2.png) [@Panman8201](https://discuss.emberjs.com/u/Panman8201)\
**Post date:** [April 10, 2018, 3:57pm UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/6 "2018-04-10T15:57:24Z")

</div>

Also, you should be able to use the `lt` computed macro: [https://www.emberjs.com/api/ember/3.0/functions/@ember%2Fobject%2Fcomputed/lt](https://www.emberjs.com/api/ember/3.0/functions/@ember%2Fobject%2Fcomputed/lt)

```nohighlight
isDeleteButtonDisabled: lt('model.shopLanguages.length', 2)

```

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [April 11, 2018, 8:42am UTC](https://discuss.emberjs.com/t/computed-property-to-disable-enable-button/14509/7 "2018-04-11T08:42:02Z")

</div>

Wow, thank you very much, @Panman8201, I’m really glad to know that, - every time it is like a discovery :). There is still so much to know in Ember ecosystem.