无法根据道具更新数据

Question

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

{
.....
<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
 },
}

更改：我建议您不要将其作为数组，而是将其作为对象保存。而且watch会在挂载完成后立即触发，不用担心

无法根据道具更新数据

Can't update data based on props

vue.js

vue-component

vuex

vuejs3