为什么我的计算属性没有在 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 ://v2.vuejs.org/v2/guide/reactivity.html

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