CODEWITHSUNDEEP
javascriptvue.jshtml-framework-7
elifiner
elifiner

Reputation: 7575

Why is my computed property doesn't get updated in Vue?

This should be easy, but I can't find what I'm doing wrong. The button should only be enabled when all the checkboxes are checked, but the change doesn't propagate. In fact buttonDisabled is only called once at the start.

Would love both an answer and some tips on how to debug this.

<template>
  <f7-page name="home">
    <f7-list inset>
      <f7-list-item title="I've got my headphones on">
          <f7-checkbox slot="media" :checked="checked.headphones"></f7-checkbox>
      </f7-list-item>
      <f7-list-item title="I have 10 minutes to myself">
          <f7-checkbox slot="media" :checked="checked.time"></f7-checkbox>
      </f7-list-item>
      <f7-list-item title="I'm in a quiet space">
          <f7-checkbox slot="media" :checked="checked.quiet"></f7-checkbox>
      </f7-list-item>
    </f7-list>
    <f7-list inset>
        <f7-button :disabled="buttonDisabled" fill round>Let's get started</f7-button>
    </f7-list>
  </f7-page>
</template>

<script>
  export default {
    data: function() {
      return {
        checked: {
          headphones: false,
          time: false,
          quiet: false,
        }
      }
    },
    computed: {
      buttonDisabled() {
        return ! ( this.checked.headphones && this.checked.time && this.checked.quiet );
      }
    }
  }
</script>

Upvotes: 1

Views: 227

Answers (2)

Be Kind
Be Kind

Reputation: 5172

This is due to vue's reactivity caveat: https://v2.vuejs.org/v2/guide/reactivity.html

You're updating object's property, and computed prop is not able to register the change - as a solution try handling change event this way: @change="checked = {...checked}

Upvotes: 2

Alberto Rivera
Alberto Rivera

Reputation: 3752

You need to use @change in order to update the model for each of the checkboxes.

https://framework7.io/vue/checkbox.html

<f7-checkbox slot="media" :checked="checked.headphones" @change="checked.headphones = $event.target.checked"></f7-checkbox>

Upvotes: 2

Related Questions