I am currently facing a challenge with linking to external URLs. The URL is extracted from JSON and connected to an HTML tag, but I am unable to retrieve the data and link it to the URL when clicking on 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/"
} ]
}
}
}