Javascript 使用V-for和V-if链接两个列表

平台：SharePoint 2016

框架：Vuejs

我为一个有博客的组织工作，但奇怪的是作者的照片是独立存储的

两个列表中都有一列关联该连接。 外部的v-for循环通过博客文章和内部v-for循环通过图片

如果外部v-for的值等于内部v-for

，我希望图像显示出来。 代码如下：

<v-row v-for="post in postArray">
    <table style="width:100%;margin-top:5px;margin-bottom:5px;border-bottom:1px gray solid;font-size:14px">
        <tr>
            <td style="padding:5px;width:80px;vertical-align:top;">
                <span v-for="blog in blogPictureArray" >
                    <span v-if='blog.Name' == 'post.Category'>
                        <img v-bind:src="blog.Name || alternateImg" v-bind:alt="post.BlogImgAlt" width="55" height="55" />
                    </span>
                </span>
            </td>
            <td>
                <p class="bloghead"><a v-bind:href="editLink + post.Id">{{post.Title}}</a></p>
                <p>by {{post.Author0  || "N/A"}} | {{convertDate(post.Created)}}
                <br />{{stripHtml(post.Body)}}<a v-bind:href="editLink + post.Id">read more</a></p>
            </td>
        </tr>
    </table>
</v-row>

作者{post.Author0 | | |“N/A”}{{convertDate（post.Created）}

{{stripHtml（post.Body）}

图片是空白的，但我也没有得到错误，所以我不确定我做错了什么

---

有什么想法吗？

您确定要将

blog.Name

设置为图像源吗？我不知道它的价值是什么，但根据它的语义，它可能是

My Bali diving trip

，而不是

path/to/author.jpg

另一件事是我在循环逻辑中去掉了声明性循环。只需将其移动到组件的方法：

<img :src="getImgSrc(post)">
...
methods: {
  getImgSrc(post) {
    // Here check the pictureArray and return proper image path
  }
}

...
方法：{
getImgSrc（职位）{
//在此处检查pictureArray并返回正确的图像路径
}
}

---

最后。。。桌子设计？Common it's 2020:）

v-if=“'blog.Name==post.Category”表格设计的目的取决于需求：