Add Hyperlink in VUE Bootstrap-CodePudding

I'll ask again why this thing is make me crazy. I would like to add an external link(https://ipaddresstrackerrzt.mdbgo.io/)enter image description here on my portfolio page inside the title of the work.

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 >
                    <span >
                      <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 >
                      <li v-for="tool in getSinglePortfolioItem.tools" :key="tool">
                        <a :href="'archive-portfolio.html?tax=tools&tools='   tool">{{ tool }}</a>
                      </li>
                    </ul>
                  </div>
                </li>

CodePudding user response：

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

You can add an ancor tag around the rendered h2 title

CodePudding user response：

You should put the link json tag outside title, and bind the href without the quotes.
Maybe add a check for when the link is empty, otherwise that's it

CodePudding user response：

finally the solution to my problem, thank you very much Nicola. You are talented boy