在VUE引导中添加超链接

Question

我再问一遍为什么这件事让我抓狂。我想在我的作品集页面上添加一个外部链接(https://ipaddresstrackerrzt.mdbgo.io/)enter图像描述)。

main.js
{
id: 18,
url: 'single-portfolio.html?id=18',
imgUrl: '../assets/images/port19.png',
title: {
en: 'Address Tracker App',
ar: 'هنا عنوان المشروع 18'
},
date: {
en: 'Marzo 2022',
ar: 'أبريل 2021'
},
desc: {
en: 'Questa applicazione permette di rilevare la  geolocalizzazione degli indirizzi IP. Inserendo nel campo search un indirizzo IP ci permette di rilevare su una mappa mondiale la posizione del sudetto indirizzo. Lasciando vuoto il campo `search` e premendo solamente il pulsante nero con la freccia, rileva il nostro IP danoci anche la nostra posizione. E` stata sviluppata con Vue 3, Tailwind CSS & Leaflet.js',
another piece:
// get single portfolio item
getSinglePortfolioItem() {
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
return this.allPortfolioItems.find(item => item.id == id);

singleportfolio.html
<!-- text box -->
<div class="text-box-block">
<span class="subtitle">
<a :href="'archive-portfolio.html?tax=cat&cat=' + getSinglePortfolioItem.category">{{ getSinglePortfolioItem.category }}</a>
</span>
<h2>{{ getSinglePortfolioItem.title.en }}</h2>
<p>{{ getSinglePortfolioItem.desc.en }}</p>
<ul class="work-tools">
<li v-for="tool in getSinglePortfolioItem.tools" :key="tool">
<a :href="'archive-portfolio.html?tax=tools&tools=' + tool">{{ tool }}</a>
</li>
</ul>
</div>
</li>

Answer 1

<h2>
<a href="https://ipaddresstrackerrzt.mdbgo.io/">
{{ getSinglePortfolioItem.title.en }}
</a>
</h2>

你可以在渲染的h2标题

周围添加一个ancor标签

Answer 2

您应该将linkjson标签放在title之外，并绑定不带引号的href。
也许可以添加一个检查当链接是空的，否则，它

Answer 3

终于解决了我的问题，非常感谢你Nicola。你是个有天赋的男孩