无法根据 props 更新数据

Question

我有一个组件层次结构，A、B 和 AccountCard。在组件 A 中，我执行了一个帐户验证，并将结果通过 props 传递给组件 B，基于 props 的组件应该更新数据并将其传递给子组件 AccountCard。如果我使用下面的方法，我会收到错误“无法读取未定义的属性‘isActiveAccount’”。基于这个变量，我必须显示一个或另一个按钮。如何根据 props 更新数据？

{
.....
<template>
    <AccountCard
      v-for="(item, index) in accountDetails"
      :key="index"
      :item="item"
    />
</template>
export default {
  components: {
    .....
  },
  props: {
    isActiveAccount: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    ......
    accountDetails: [
      {
        isActive: this.isActiveAccount,
      }
    ]
  })
}

Answer 1

当道具改变时，如果你想更新数据值，那么使用下面的方法

export default {
  components: {
    .....
  },
  props: {
    isActiveAccount: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    ......
    accountDetails: {
        isActive: false, // set inital value to be null if you want to check if the watch handler is really working
      }
  }),
 watch: {
    isActiveAccount(newVal) {
     this.accountDetails.isActive = newVal; //Change added
 },
}

更改：我建议您不要将其作为数组保存，而是将其保存为对象。此外，手表会在挂载完成后立即触发，所以您不必担心