如何在列表中生成动态 url？

我从我的后端得到一个列表：

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

我的目标是像http://myurl/owner/edit/${{ owner.codename }}使用 VueJS一样显示一个带有 url 的 owner.name 列表。

目前我的代码是：

<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？我对前端真的很陌生，所以如果我的问题看起来很微不足道，我很抱歉。