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

【问题标题】：How can I generate dynamic url in a list?如何在列表中生成动态 url？
【发布时间】：2021-11-21 08:46:19
【问题描述】：

我从后端得到一个列表：

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

我的目标是使用 VueJS 显示带有 http://myurl/owner/edit/${{ owner.codename }} 之类的 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？我真的是前端新手，所以如果我的问题看起来很琐碎，我很抱歉。

【问题讨论】：

标签： html vue.js dictionary frontend

【解决方案1】：

这可能有效

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

【讨论】：

引发语法错误invalid expression: Unexpected token '{' in 'localhost:8080/admin/owner/'+{{ owner.codename }}
必须删除花括号

【解决方案2】：

这行得通：<a :href="'/admin/owner/' + owner.codename">{{ owner.name }}</a>

【讨论】：

是的，这也有效。 :)

【解决方案3】：

试试这个：

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

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

并像这样使用它：

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

注意冒号：

:href

这意味着它将尝试将 href 属性绑定到来自 Vue 组件的某个变量/方法/计算属性

【讨论】：