Vue.js中如何从数组中获取值？附具体场景咨询

嘿，我来帮你搞定这个问题！你已经能顺利用{{post.title}}获取文章标题了，那要访问categories数组里的内容其实也很直观，分几种常见场景来给你说明：

1. 遍历所有分类（最常用场景） #

如果需要把所有分类的信息都展示出来，用循环遍历数组就可以。从你用的{{}}语法来看，大概率是Laravel Blade模板，写法如下：

@foreach($post->categories as $category)
    <div>
        <h4>分类名称：{{ $category->name }}</h4>
        <p>分类ID：{{ $category->id }}</p>
        <p>创建时间：{{ $category->created_at }}</p>
    </div>
@endforeach

这里$post->categories对应你的分类数组，$category是循环时每个分类的临时变量，直接通过$category->属性名就能拿到对应的值。

2. 直接获取单个分类的内容 #

如果你明确要取数组里某一个分类的信息，比如第一个分类的名称，可以通过数组索引访问（注意数组索引从0开始）：

{{ $post->categories[0]->name }}

要是想取第二个分类的更新时间，就写成：

{{ $post->categories[1]->updated_at }}

3. 访问关联的pivot表字段 #

你的分类对象里还有pivot字段，存储了文章和分类的关联信息，同样可以直接访问：

@foreach($post->categories as $category)
    <p>关联的文章ID：{{ $category->pivot->post_id }}</p>
    <p>关联的分类ID：{{ $category->pivot->category_id }}</p>
@endforeach

小提示 #

为了避免数组为空时出现报错，建议在循环前加个判断：

@if($post->categories->isNotEmpty())
    @foreach($post->categories as $category)
        <!-- 你的分类内容展示代码 -->
    @endforeach
@else
    <p>暂无分类</p>
@endif

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