【Vue.js】v-forで多次元配列を扱う方法

使い方

<div v-for="tmp in showpost">
    <h3>｛｛tmp.name｝｝</h3>
    <div class="relatepost">
        <div v-for="article in tmp.items" class="relatepost_item">
            <span class="category_icon">｛｛article.category｝｝</span>
            <a v-bind:href="article.id + '.php'" target="_blank">
                ｛｛article.title｝｝
            </a>
        </div>
    </div>
    <br>
</div>

// script内での処理
let retList = [];

// 配列にオブジェクトを格納
for (var i = 0; i < self.tag.length; i++) {
    retList.push({
        name: self.tag[i],
        items: []
    });
}

// オブジェクト内の配列に表示したいものを格納
self.kiji.forEach(p => {
    for (var i = 0; i < self.tag.length; i++) {
        if (p.tag.toLowerCase().indexOf(self.tag[i].toLowerCase()) > -1) {
            retList[i].items.push(p);
        }
    }
});
self.showpost = retList;

参考