时间戳

首页 > 解决方案 > 为什么我的计算属性没有在 Vue 中更新？

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

问题描述

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

标签： javascriptvue.jshtml-framework-7

解决方案

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

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

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

推荐阅读