Link to external url from json data by using Vue

Question

I have a big problem to link to external url. This url I'm taking from json and connecting to HTML tag. However I can not get url data and link to that url when I click images.

HTML

<section class="bg-light page-section" id="portfolio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center"><br>
          <h2 class="section-heading text-uppercase works-text">Works</h2>
          <h3 class="section-subheading text-muted">Selected work that has been created with the help of many.</h3>
        </div>
      </div>
      <div class="row">
       <div class="col-md-4 col-sm-6 portfolio-item" v-for="(obj, key) in portfolioJSON" :key="key"  >
          <a :href="`${obj.url}`" class="portfolio-link" data-toggle="modal" target="_blank" >
            <div class="portfolio-hover">
              <div class="portfolio-hover-content">

              </div>
            </div>
            <img :src="`${obj.img}`" class="img-fluid" >
          </a>
        </div>

      </div>
    </div>
  </section>

export default {
    data() {
      return {
        portfolioJSON: [
           {
                img: require('../assets/img/sukimatch/sukimatch.png'),
                caption: 'Sukimatch',
                title: 'WEBSITE, BANNER DESIGN',
                url: "https://sukimatch-f887f.firebaseapp.com/"
            }     ]
    }
    }
}
```

Answer 1

Your code, in principal, works fine, but the what you're doing the img tags doesn't make sense.

It's best to use a small, reproducible example for SO questions. I took your code and made this fiddle helps a lot. I put one here:

https://jsfiddle.net/79qLzv58/1/

The data I used is:

    portfolio: [{
        img: 'https://dummyimage.com/300x200/000/fff&text=one',
        caption: 'Caption 1',
        title: 'Title 1',
        url: "https://destination-1.com/"
      },
      {
        img: 'https://dummyimage.com/300x200/000/fff&text=two',
        caption: 'Caption 2',
        title: 'Title 2',
        url: "https://destination-2.com"
      }
    ]

In your case you don't have to use template strings like

<a :href="`${obj.url}`">

but can just do:

<a :href="obj.url">

Though if you're doing any kind of joining or modifying the URL then template strings are handy.

I'm not sure if the img data URL is something critical to your app but this answer has more on that.