时间戳

首页 > 解决方案 > 使用 V-for 和 v-if 链接两个列表

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

问题描述

平台：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>

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

有任何想法吗？

标签： javascriptvue.jssharepoint

解决方案

您确定要设置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 年 :)

推荐阅读