v-forで一つのHTML要素内に文字列を結合して出力したい

Question

Vue.jsを使用しています。
aタグの中に、文字列を半角スペースで結合させて出力したいです。

入力(現状)

<h3>部署名</h3>
<p><a><span v-for="department in item.departments">{{ department.name }}&nbsp;</span></a></p>

出力(現状)

<h3>部署名</h3>
<p><a><span>営業部&nbsp;</span><span>経理部&nbsp;</span><span>人事部&nbsp;</span></a></p>

spanタグを挟まずに、aタグ内に文字列を出力したいです

入力(イメージ)

LaravelのBladeテンプレートで書いたらこんな感じで作れると思います(試してませんが)

<h3>部署名</h3>
<p><a>
@foreach($departments as $department)
{{ $department->name . "&nbsp;" }}
@endforeach
</a></p>

これに近しいことを、Vue.jsで実現したいです

出力(理想)

<h3>部署名</h3>
<p><a>営業部&nbsp;経理部&nbsp;人事部&nbsp;</a></p>

何か良い方法はありますか？

Answer 1

下記コードのようなデータが定義されていると仮定したサンプルです。ポイントは次の2点です。

1. 文字列の連結はcomputedに定義するgetDepartmentsメソッドで行う。
2. 連結した文字列に という文字実体参照を含むのでhtmlへの出力はv-htmlを使用する。

<template>
  <div class="about">
    <h3>部署名</h3>
    <p><a href="/" v-html="getDepartments"></a></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {
        departments: [
          {id: 1, name: '営業部' },
          {id: 2, name: '経理部' },
          {id: 3, name: '人事部' }
        ]
      }
    }
  },
  computed: {
    getDepartments() {
      return this.item.departments.reduce((acc, dept) => acc + dept.name + "&nbsp;", "")
    }
  }
}
</script>