Vue.js 3中如何将整数变量作为数组索引使用？

问题原因 #

你遇到的问题本质是在Vue的data函数返回的对象字面量中，无法直接引用该对象的其他属性，核心原因有两点：

1. 直接写random_array[1]时，random_array并不是当前函数作用域的变量，而是返回对象的一个属性，在对象字面量内部无法直接访问自身的其他属性。
2. 使用this.random_array也无效，因为在return的对象字面量中，this的指向并不是Vue实例（此时实例还未完成初始化），所以无法通过this访问到data里的属性。

解决方案 #

方案1：先在函数作用域定义变量，再返回对象 #

如果random_var只需要初始化一次，不需要跟随其他属性动态更新，可以先把需要的变量定义在data函数的作用域里，再组装返回对象：

export default {
    data() {
        // 先在函数作用域声明变量
        const random_number = 1;
        const random_array = ['A','B','C'];
        
        return {
            random_number,
            random_array,
            // 直接引用作用域里的变量
            random_var: random_array[random_number]
        }
    }
}

方案2：使用计算属性（推荐，支持响应式更新） #

如果random_var需要随着random_number或random_array的变化自动更新，**计算属性（computed）**是Vue官方推荐的方式，它会自动追踪依赖并在依赖变化时重新计算：

export default {
    data() {
        return {
            random_number: 1,
            random_array: ['A','B','C']
        }
    },
    computed: {
        random_var() {
            // 这里的this指向Vue实例，可以正常访问data中的属性
            return this.random_array[this.random_number];
        }
    }
}

之后在模板中使用random_var的方式和使用data属性完全一致，而且它会自动保持最新值。

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