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

Question

我从后端获取列表：

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

我的目标是使用 VueJS 显示 owner.name 和 url 类似 http://myurl/owner/edit/${{ owner.codename }} 的列表。

目前我的代码是：

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

Answer 1

这可能有效

<a :href="'localhost:8080/admin/owner/'+owner.codename " target="_blank" rel="noreferrer noopener">{{ owner.name }}</a>

Answer 2

试试这个：

在你的 Vue 组件的 methods 属性下创建一个新方法：

methods: {
    url(codename) {
        return `/admin/owner/${codename}`;
    }
}

并像这样使用它：

<a :href="url(owner.codename)">...</a>

注意冒号符号：

:href

这意味着它将尝试将 href 属性绑定到一些来自 Vue 组件的 variable/method/computed 属性

Answer 3

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

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

How can I generate dynamic url in a list?

html

frontend

dictionary

vue.js