Vue+Laravel中如何从对象数组获取estado字段值？

核心问题 #

你的scope.row.estadosFicheros本质是JSON格式的字符串，不是JavaScript对象数组。证据就是你用scope.row.estadosFicheros[0]得到的是字符串的第一个字符[，而非数组的第一个元素。

错误原因拆解 #

1. 直接访问scope.row.estadosFicheros.estado：字符串/数组本身没有estado属性，返回undefined是必然的。
2. 用JSON.parse(scope.row.estadosFicheros)后仍访问.estado：解析后得到的是数组，数组本身没有estado字段，必须先取数组元素（比如[0]）再访问该元素的estado属性。

正确解决方法 #

方法一：后端Laravel处理（推荐）

在对应的Model类中添加$casts属性，让Laravel自动将数据库存储的JSON字符串转为数组/对象返回给前端：

// 你的模型文件（比如Tarea.php）
class Tarea extends Model
{
    protected $casts = [
        'estados_ficheros' => 'array', // 对应数据库字段名，需和前端接收的字段名对应
    ];
}

处理后，前端拿到的scope.row.estadosFicheros就是标准的对象数组，直接访问即可：

{{ scope.row.estadosFicheros[0].estado }}

方法二：前端Vue处理

如果后端无法修改，就在前端手动解析JSON字符串：

1. 模板内直接处理（添加类型判断避免解析报错）：

{{ typeof scope.row.estadosFicheros === 'string' ? JSON.parse(scope.row.estadosFicheros)[0].estado : scope.row.estadosFicheros[0]?.estado }}

2. 请求数据后统一处理：
   在获取后端数据的逻辑中，提前将字符串转成对象数组：

// 假设你用axios请求数据
axios.get('/api/tareas').then(res => {
    this.tareas = res.data.map(item => {
        if (typeof item.estadosFicheros === 'string') {
            item.estadosFicheros = JSON.parse(item.estadosFicheros);
        }
        return item;
    });
});

之后在模板里就能正常使用scope.row.estadosFicheros[0].estado了。

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