Почему мое вычисленное свойство не обновляется в Vue? - PullRequest
Новая
       10

Почему мое вычисленное свойство не обновляется в Vue?

0 голосов
/ 06 августа 2020

Это должно быть легко, но я не могу понять, что делаю не так. Кнопка должна быть включена только тогда, когда установлены все флажки, но изменение не распространяется. Фактически buttonDisabled вызывается только один раз в начале.

Хотелось бы получить ответ и несколько советов по отладке этого. 

<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>

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Это связано с предостережением о реактивности vue: https://vuejs.org/v2/guide/reactivity.html

Вы обновляете свойство объекта, и вычисляемая опора не может зарегистрировать изменение - как Решение попробуйте обработать событие change следующим образом: @change="checked = {...checked}

1 голос
/ 06 августа 2020

Вам необходимо использовать @change, чтобы обновить модель для каждого из флажков.

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

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