首页 > 解决方案 > 如何在列表中生成动态 url?

问题描述

我从后端得到一个列表:

[
{
'name': 'nameA',
'codename': 'codenameA'
},
{
'name': 'nameB',
'codename': 'codenameB'
},
{
'name': 'nameC',
'codename': 'codenameC'
}

我的目标是显示一个 owner.name 列表,其中包含http://myurl/owner/edit/${{ owner.codename }}使用 VueJS 的 url。

目前我的代码是:

<template>
<div class="container my-3">
  <div class="row">
    <div class="col-8">
      <ul v-for="owner in this.databaseOwners" :key="owner.name" class="list-group">
        <li class="list-group-item">
          <a href=`"localhost:8080/admin/owner/${{{ owner.codename }}}"` target="_blank" rel="noreferrer noopener">{{ owner.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</template>

但它不起作用,在我的情况下如何使用动态 URL?我对前端真的很陌生,所以如果我的问题看起来真的很微不足道,我很抱歉。

标签: htmlvue.jsdictionaryfrontend

解决方案


这有效:<a :href="'/admin/owner/' + owner.codename">{{ owner.name }}</a>


推荐阅读