Vue: установка начальной строки данных со ссылкой

Question

У меня есть массив объектов как boxData в моих исходных данных. Как мне go сделать слово «здесь» гиперссылкой, которую я могу использовать при ссылке на boxData?

data() {
    return {
        boxData: [
            {
                body: "This is the link here."
            },
            {
                body: "Normal text."
            }
        ]
    }
}

Дочерний компонент

<div v-for="(box, index) in boxData" class="box">
    <div>
         {{ box.body }}
    </div>
</div>

Answer 1

В идеале объекты со ссылкой должны иметь свойство, подобное url. Затем, предполагая, что все ссылки должны сказать «Это ссылка здесь», вы можете сделать:

<div v-for="(box, index) in boxData" class="box">
  <div>
    <template v-if="box.url">
      This is the link <a :href="box.url">here</a>.
    </template>
    <template v-else>
      {{ box.body }}
    </template>
  </div>
</div>

Тогда вам не нужно «Это ссылка здесь» ни в одном из объектов.

Answer 2

Вы просто должны поместить данные в гиперссылку следующим образом:

<a :href="boxData.body">Here</a>

Намного лучше

<router-link :to="boxData.body">Here</router-link>