为什么我的计算属性没有在 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&nbsp;slot="media"&nbsp;:checked="checked.headphones"&nbsp;@change="checked.headphones&nbsp;=&nbsp;$event.target.checked"></f7-checkbox>

Answer 2

这是由于 vue 的反应性警告：https ://v2.vuejs.org/v2/guide/reactivity.html您正在更新对象的属性，并且计算属性无法注册更改 - 作为解决方案尝试以change这种方式处理事件：@change="checked = {...checked}