Связывание двух списков с использованием V-for и v-if

Question

Платформа: SharePoint 2016

Framework: 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.

Еще одна вещь, которую я избавился от декларативного l oop внутри l oop logi c. Просто перенесите его на метод компонента:

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

И в конце концов ... дизайн таблицы? Общее это 2020:)