Vue.js で2つの配列からデータを取得する

Vue.js の勉強してるけどなんかなぁ…って感じ。どうも文法というか書式というかに馴染めない感じ。自分の頭がオブジェクト指向じゃないからなんだろうけど。MVVM の解説読んでみたけど初歩的なことやってないから View とか Model とかよくわからない。

さて、Elasticsearch に貯めたデータをほぼそのまま Vue.js に持ってきてるんだけども、設計のミスもあったせいでちょっと困った。

大抵の書籍の場合、一つの書籍に対して一人の著者が結び付く 1:1 なんだけど、書籍やストアによっては一つの書籍に対して複数の著者が結びつく 1:n になっていることがある。

xpath で取り出しているせいもあって、初期段階では全ての項目が配列になっているところを、配列の長さが 1 のものは文字列に変換する処理をかけていた。

1:1 のデータ

{
  "hits": {
    "_source": {
      "book_name": "五等分の花嫁",
      "author_name": "春場ねぎ",
      "author_url": "https://booklive.jp/focus/author/a_id/123817"
    }
  }
}

1:n のデータ

{
  "hits": {
    "_source": {
      "book_name": "転生したらスライムだった件",
      "author_name": [
        "川上泰樹",
        "伏瀬",
        "みっつばー"
      ],
      "author_url": [
        "https://booklive.jp/focus/author/a_id/121592",
        "https://booklive.jp/focus/author/a_id/110906",
        "https://booklive.jp/focus/author/a_id/110907"
      ]
    }
  }
}

Python であれば zip(author_name, author_url) で２つの配列を紐付けることができるんだけど Vue.js というか JavaScript でその方法がわからない。

じゃあインデックスは一致してるんだから片方のインデックス使って参照すればいいんじゃないの、と思ったけど、1:1 の方は文字列で入っているので v-for に入れてしまうと1文字ずつに分割されてしまう…Oh。

というわけで v-if="Array.isArray()" で条件分岐すればいいんじゃないかと思ったけどネット上にうまいことやってるお手本が無かった。個人的にはこういう情報がネットにあると嬉しいんだけどなぁと思う。言語によって説明が上手い人もいたりいなかったり。言語の好みはこういうところから分かれていくのだろうか。

v-for はインデックスも取れるようなので author_name のインデックスを index 変数に入れて、そのインデックスを使って author_url の値を拾ってくる。

<!-- author_name が配列の場合 -->
<ul v-if="Array.isArray(hits._source.author_name)">
    <li v-for="author_name, index in hits._source.author_name">
        <a v-bind:href="hits._source.author_url[index]">{{ author_name }}</a>
    </li>
</ul>
<!-- author_name が文字列の場合 -->
<ul v-else>
    <li>
        <a v-bind:href="hits._source.author_url">{{ author_name }}</a>
    </li>
</ul>