当我使用 Vue 单击图像时,链接到其他网址时遇到问题。
它应该能够通过单击图像进行链接,但它不起作用。
如果有人可以帮助我,我将不胜感激。
我的代码如下所示。
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 class="portfolio-link" data-toggle="modal" target = "_blank" v-bind:href="`${obj.url}`">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<!-- <! <i class="fas fa-plus fa-3x"></i> -->
</div>
</div>
<img :src="`${obj.img}`" class="img-fluid" >
</a>
<div class="portfolio-caption works-text">
<h4 class="works-text">{{ obj.caption }}</h4>
<p class="text-muted works-text">{{ obj.title }}</p>
</div>
</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/"
},
{
img: require('../assets/img/portfolio/greencosjapan.png'),
caption: 'Greencosjapan',
title: 'WEBSITE',
url: "https://greencosjapan.com"
}
]
}
}, computed: {
imageArray: function() {
return this.portfolioJSON.map(obj => obj.img)
},
urlArray: function() {
return this.portfolioJSON.map(obj => obj.url)
}
},
}
最佳答案
你的代码不会那样工作,你应该调用 ${obj.img}
,这是模板文字的新 ES6 语法
<div class="col-md-4 col-sm-4 sk-item" v-for="(obj, key) in portfolioJSON" :key="key">
<img :src="`${obj.img}`" class="img-fluid" alt="" >
</div>
您可以在这里阅读更多相关信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
它非常有用,您应该在代码中所有可以使用它的地方使用它。
img: require('../assets/img/sukimatch/sukimatch.png'),
caption: 'Sukimatch',
title: 'WEBSITE, BANNER DESIGN',
url: "https://sukimatch-f887f.firebaseapp.com/"
:title="`${obj.title}`"
:href="`${obj.url}`"
:img="`${obj.img}`"
希望这可以帮助你:)
更新:
export default {
data() {
return {
portfolioJSON: [
{
img: require('../assets/img/sukimatch/sukimatch.png'),
caption: 'Sukimatch',
title: 'WEBSITE, BANNER DESIGN',
url: "https://sukimatch-f887f.firebaseapp.com/"
},
{
img: require('../assets/img/portfolio/greencosjapan.png'),
caption: 'Greencosjapan',
title: 'WEBSITE',
url: "https://greencosjapan.com"
}
]
}, computed: {
imageArray: function() {
return this.portfolioJSON.map(obj => obj.img)
}
}
}
关于javascript - 有没有办法在Vue中链接图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58897950/