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

【问题标题】：Why is my computed property doesn't get updated in Vue?为什么我的计算属性没有在 Vue 中更新？
【发布时间】：2020-08-06 01:57:45
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js html-framework-7

【解决方案1】：

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

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

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

【讨论】：

你说得对，我认为 checked 会表现得像 v-model 但文档清楚地表明它没有。呵呵。

【解决方案2】：

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

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

【讨论】：