如何在VueJS列表中生成动态URL？后端返回列表场景下的问题解决

云上老周

2026-4-30

解决VueJS动态URL渲染列表的问题

别担心，新手遇到这种绑定问题太正常了，我帮你梳理下代码里的问题，然后给你正确的实现方式：

你的代码里有两个核心问题：

v-for的位置错误：你把v-for写在了<ul>标签上，这会导致生成多个独立的<ul>列表（每个列表里只有一个<li>），不符合标准的HTML列表结构，应该把v-for移到<li>标签上，让单个<ul>容器承载所有列表项。
动态href的语法错误：你混用了模板字符串和错误的引号嵌套，而且没有用Vue的动态绑定语法。Vue里要绑定动态属性，需要用:href（v-bind:href的简写），然后用JavaScript模板字符串来拼接URL。

修正后的完整代码：

<template>
  <div class="container my-3">
    <div class="row">
      <div class="col-8">
        <ul class="list-group">
          <li 
            v-for="owner in databaseOwners" 
            :key="owner.codename"  <!-- 用唯一的codename做key更可靠，避免name重复的问题 -->
            class="list-group-item"
          >
            <a 
              :href="`http://myurl/owner/edit/${owner.codename}`" 
              target="_blank" 
              rel="noreferrer noopener"
            >
              {{ owner.name }}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

关键细节说明：

v-for的位置：现在v-for在<li>上，每次循环生成一个列表项，所有项都在同一个<ul>里，结构正确。
动态href绑定：:href告诉Vue这是一个动态属性，值用模板字符串`http://myurl/owner/edit/${owner.codename}`来拼接，${owner.codename}会自动替换成当前循环项的codename值。
key的选择：把key从owner.name改成owner.codename，因为codename通常是唯一标识，而name可能存在重复，Vue要求key必须唯一，这样能保证列表渲染的性能和正确性。
去掉this：在Vue模板里访问data中的变量（比如databaseOwners）不需要加this.，直接写变量名即可。