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

Question

我的数据中有一个数组：

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 计算的属性的 return 值传递给数据中的 disabled 值，但在 ProgressContent 组件中disabled 值不存在（它是空的）。

Answer 1

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

您可以将 steps 创建为 computed:

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

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

Can't use computed property in data

javascript

vue.js

vue-component

vuejs2

vue-reactivity

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

Can't use computed property in data

javascript

vue.js

vue-component

vuejs2

vue-reactivity

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