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

Question

平台：SharePoint 2016

框架：Vuejs

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

两个列表中都有一列与连接相关联。 外部 v-for 循环遍历博客文章，内部 v-for 循环遍历图片。

如果外部 v-for 的值等于内部 v-for <span v-if='blog.Name' == 'post.Category'> ，我希望图像显示。 这是代码：

<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>

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

有任何想法吗？

Answer 1

您确定要将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
  }
}

最后......一个桌子设计？ 常见的是 2020 年 :)