不能在数据中使用计算属性答案

【问题标题】：Can't use computed property in data不能在数据中使用计算属性
【发布时间】：2021-06-04 01:18:07
【问题描述】：

我的数据中有一个数组：

data () {
  return {
    steps: [
      {
        disabled: this.someCheck
      }
    ]
  }
}

还有一个计算属性：

computed: {
  ...mapGetters({
    getFinishedSteps: 'jobFound/getFinishedSteps'
  }),

  someCheck () {
    let x = true
    for (const val of this.getFinishedSteps) {
      if (val === ('address_information' || 'contact_information' || 'financiel_information' || 'identity_information')) {
        x = false
      }
    }
    return x
  }
}

还有模板：

<ProgressContent
  v-for="(step, n) of steps"
  :key="n"
/>

还有 ProgressContent 组件：

props: {
  step: {
    type: Object,
    default: () => ({
      disabled: false
    })
  },
}

我想将someCheck 计算属性的返回值传递给数据中的disabled 值，但在ProgressContent 组件中，disabled 值不存在（它是空的）。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vue-reactivity

【解决方案1】：

在数据初始化时，您不能将计算值分配给数据属性。即使可以，它也不会是被动的，它只会发生一次。如果计算值改变了，数据属性不会改变。

您可以将steps 创建为计算的：

computed: {
  ...mapGetters({
    getFinishedSteps: 'jobFound/getFinishedSteps'
  }),
  someCheck () {
    // ...
  },
  steps() {
    return [{  disabled: this.someCheck }]
  }
}

或者你可以使用手表：

data() {
  return {
    steps: [{ disabled: null }]
  }
},
computed: {
  ...mapGetters({
    getFinishedSteps: 'jobFound/getFinishedSteps'
  }),
  someCheck () {
    // ...
  }
},
watch: {
  someCheck: {
    handler(newValue) {
      this.steps[0].disabled = newValue;
    },
    immediate: true
  }
},

【讨论】：