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

Posted 2023-02-22

【中文标题】如何在列表中生成动态 url？

【英文标题】：How can I generate dynamic url in a list?

【发布时间】：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？我真的是前端新手，所以如果我的问题看起来很琐碎，我很抱歉。

【参考方案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 组件的某个变量/方法/计算属性