Vue JS中数组内访问变量报错isValid未定义，求解决方法

我是JavaScript和Vue初学者，正在通过示例学习基础概念。

我的代码如下：

<template>
  /*<p v-bind:class="['bold', 'italic', isValid ? 'valid' : 'invalid']">*/

  <p v-bind:class="classArray">
    Hello, {{name[0]}} {{name[1]}}
  </p>
</template>

<script>

export default {
  data() {
    return {     
      isValid: true,
      name: ['John','Doe'],
      classArray: ['bold', 'italic', isValid ? 'valid' : 'invalid']
      
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

运行代码时抛出如下错误：

ERROR
[eslint]
/js/vue3/src/App.vue
16:38 error 'isValid' is not defined no-undef

✖ 1 problem (1 error, 0 warnings)

错误原因 #

在data()函数的return对象中，定义classArray时，isValid是该对象的一个属性，但此时对象还未完成初始化，直接引用isValid会被当作未定义的全局变量，因此触发ESLint的no-undef错误。

解决方案 #

方案1：使用计算属性（推荐）

将classArray改为计算属性，计算属性可以直接访问组件实例的isValid属性，且会在isValid变化时自动更新，这是Vue处理动态响应式数据的最佳实践：

<template>
  <p v-bind:class="classArray">
    Hello, {{name[0]}} {{name[1]}}
  </p>
</template>

<script>
export default {
  data() {
    return {     
      isValid: true,
      name: ['John','Doe']
    }
  },
  computed: {
    classArray() {
      return ['bold', 'italic', this.isValid ? 'valid' : 'invalid']
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

方案2：在data函数中先定义变量再返回

如果一定要在data的返回对象中定义classArray，可以先在return之前把isValid的值存入变量，再在数组中使用：

<template>
  <p v-bind:class="classArray">
    Hello, {{name[0]}} {{name[1]}}
  </p>
</template>

<script>
export default {
  data() {
    const isValid = true
    return {     
      isValid,
      name: ['John','Doe'],
      classArray: ['bold', 'italic', isValid ? 'valid' : 'invalid']
    }
  }
}
</script>

<style>
  .bold    { font-weight: bolder }
  .italic  { font-style:  italic }
  .valid   { color: forestgreen  }
  .invalid { color: crimson      }
</style>

注意：方案2的classArray只会在组件初始化时赋值一次，不会随着isValid的变化自动更新，若需要响应式更新，优先选择方案1。

内容的提问来源于stack exchange，提问作者Venkat D