为什么我计算的 属性 没有在 Vue 中更新？

Question

这应该很容易，但我找不到我做错了什么。只有在选中所有复选框时才应启用该按钮，但不会传播更改。事实上 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>

Answer 1

您需要使用@change 来更新每个复选框的模型。

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

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

Answer 2

这是由于 vue 的反应性警告：https://vuejs.org/v2/guide/reactivity.html

您正在更新对象的 属性，计算属性无法注册更改 - 作为解决方案，请尝试以这种方式处理 change 事件：@change="checked = {...checked}