したいこと

v-forなどで回しつつ {{}} を使って表示させたいけど、nullのときもあるよ、というときの話です。理想は以下。

八海山（はっかいさん）　← name_kanaがあるとき
八海山　← name_kanaがないとき

今回はresult.nameは必ず存在するけど、result.name_kanaがnullのときに文字列（ここでは丸カッコ）ごと非表示にしたい場合を例にとりあげます。

うまくいかない例

このように書けば、nullのときは自ずと非表示になります。でも、今回の場合は、ああ、違った。文字列ごといらないんだよな、という話です。

<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}（{{ result.name_kana }}）</p>
</div>

八海山（）

こうする？というとこれでもないじゃないですか。

<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}{{ '（' + result.name_kana + '）' }}</p>
</div>

八海山（null）

<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}{{ result.name_kana ? `（${result.name_kana}）` : '' }}</p>
</div>

存在しているかどうかを都度確かめて、表示・非表示を振り分けています。

<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}{{ exist(result.name_kana) }}</p>
</div>

methodsに次のような物を用意しておきます。


export default {
  methods: {
    exist(data) {
      return data ? `（${data}）` : ''
    }
  }
}

そうすると、データが存在しているときだけ返ってきます。かわりにマスタッシュのなかがスッキリしますね。


<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}{{ result.name_kana | nonNull }}</p>
</div>


export default {
  filters: {
    nonNull(data) {
      return data ? `（${data}）` : ''
    }
  }
}

メソッドと似た発想ですが、フィルタを使っても書けます。


<div v-for="result in results" :key="result.id">
  <p>{{ result.name }}<span v-if="result.name_kana">{{ `（${result.name_kana}）` }}</span></p>
</div>

v-ifを使ってもできますね。

シンプルな事柄すぎてまとめている方があまりいらっしゃらなかったので、記事にしてみました。他にも「こんな方法があるよ」「いや、こう書けや」というのがあれば、ぜひ教えていただけると嬉しいです。