Vue.js中如何将多选选中项的urlAnchor拼接为完整href链接

当前链接生成逻辑和需求不匹配：代码通过v-for遍历选中项生成多个独立<a>标签，每个标签仅拼接单个选项的urlAnchor，没有实现多锚点合并到同一链接的效果。

无需改动已有的选中列表展示逻辑，仅需新增一个统一计算最终链接的计算属性，替换原来的循环链接逻辑即可。

具体修改操作 #

• 第一步：在Vue实例的computed区块中新增链接计算属性，遍历已有的选中项数组extraOutput，将所有选中项的urlAnchor依次拼接为完整路径

  // 新增的计算属性
  finalUrl() {
    const baseUrl = 'https://google.be'
    // 提取所有选中项的urlAnchor，现有数据的urlAnchor均带开头斜杠，可直接拼接
    const anchorPath = this.extraOutput.map(item => item.urlAnchor).join('')
    return `${baseUrl}${anchorPath}`
  }
  

• 第二步：替换原有的循环生成链接的代码块
  原问题代码片段：

  <button>
    <a v-for="extra in extraOutput" :href="'https://google.be'+extra.urlAnchor">Button text</a>
  </button>
  

  修改为单个绑定计算结果的链接标签：

  <button>
    <a :href="finalUrl">Button text</a>
  </button>
  

实际效果 #

• 选中Extra 1、Extra 2时，生成的完整链接为https://google.be/iii/jjj，完全符合目标需求
• 未选中任何选项时，链接自动回退为基础域名，不会出现路径拼接异常

可选优化：当前代码中复选框v-model绑定选项name值、同时通过点击事件手动维护selected状态的逻辑存在冗余，未被实际使用的checkedExtras数组可后续清理，不影响核心拼接功能的实现。

内容的提问来源于stack exchange，提问作者KoenMH