在Vue模板中如何动态调用computed计算属性？

推荐方案：定义通用取值方法（全版本兼容） #

在methods中新增一个通用的取值函数，通过实例访问动态属性名对应的computed值，可保留完整响应性，同时兼容Vue2、Vue3全版本写法：

<script>
export default {
    computed: {
        something () {
            return 'foo' 
        }
    },
    methods: {
        // 传入computed的属性名即可，支持传静态字符串或者动态变量
        getComputed(key) {
            return this[key]
        }
    }
}
</script>

<template>
   <div>
       <span v-if="getComputed('something') === 'foo'"> Computed property called dynamically </span>
   </div>
</template>

临时方案：直接在模板中使用this（仅选项式API可用） #

Vue 2.x/Vue3 选项式API的模板表达式默认绑定组件实例上下文，你原本的写法理论上可以直接运行，只是不符合官方规范，不推荐长期使用，因为无法适配Vue3 <script setup> 语法：

<template>
   <div>
       <!-- 选项式API下该写法可正常运行 -->
       <span v-if="this['something'] === 'foo'"> Computed property called dynamically </span>
   </div>
</template>

如果你使用的是Vue3 <script setup> 语法，同样可以参考推荐方案的思路，在script中定义一个通用取值函数导出，模板中直接调用即可。

内容的提问来源于stack exchange，提问作者João