[Vuejs]-Link to external url from json data by using Vue

by

0👍

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.

Leave a comment