时间戳

首页 > 解决方案 > 使用 Vue 从 json 数据链接到外部 url

javascript - 使用 Vue 从 json 数据链接到外部 url

问题描述

我有一个大问题要链接到外部 url。我从 json 获取这个 url 并连接到 HTML 标记。但是，当我单击图像时，我无法获取 url 数据并链接到该 url。

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/"
            }     ]
    }
    }
}
```

标签： javascriptjsonvue.jsurlhyperlink

解决方案

原则上，您的代码可以正常工作，但是您正在做的 img 标签没有意​​义。

对于 SO 问题，最好使用一个小的、可重复的示例。我拿走了你的代码，让这个小提琴很有帮助。我在这里放了一个：

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

我使用的数据是：

    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"
      }
    ]

在您的情况下，您不必使用模板字符串，例如

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

但可以这样做：

<a :href="obj.url">

尽管如果您要进行任何形式的加入或修改 URL，那么模板字符串会很方便。

我不确定 img 数据 URL 是否对您的应用程序至关重要，但这个答案有更多内容。

推荐阅读