Vue3中使用eval动态设置数组路径变量报Cannot set properties of undefined错误

AI 小北

2026-8-20

解决Vue3中使用eval动态访问响应式数组路径报错的问题

问题原因

你遇到的问题本质是Vue的Reactivity Transform（即你用到的$ref和$$语法）与eval的作用域冲突：

用$ref声明的productCategoriesTree会被编译为Vue的响应式代理对象，但eval运行时无法正确识别这个经过编译的变量，它会直接去当前作用域查找原始变量名，导致访问路径时拿到的不是预期的响应式节点，最终触发"Cannot set properties of undefined"错误。
另外eval本身存在安全风险和性能损耗，在Vue项目中完全没必要使用。

解决方案

替换eval，手动实现动态遍历路径的逻辑，安全获取目标节点并修改属性：

修改后的`addNewProductCategory`函数

// treePath could be [0, 1, 0, 0, 1] - it is dynamic
const addNewProductCategory = (parentCategoryUuid: string, treePath: number[]) => {
    const newProductCategory = {
        uuid: `__NEW-${uuidv4()}`,
        namePlural: 'new',
        parent: { uuid: parentCategoryUuid }
    }

    if (!productCategoriesTree[1].children) {
        productCategoriesTree[1].children = []
    }

    productCategoriesTree[1].children?.push({
        data: newProductCategory as ProductCategory,
        children: [],
    })

    // 手动遍历treePath获取目标节点
    let targetNode: any = productCategoriesTree
    for (const index of treePath) {
        if (!targetNode) break // 路径无效时提前终止，避免报错
        targetNode = targetNode[index]
    }

    // 确认目标节点存在后设置属性
    if (targetNode) {
        targetNode.$folded = false
    }
}