如何在 Vue.js 中使用 v-for 拼接 href 属性并绑定到 el-link 组件?

作者站长头像
站长
· 阅读数 4

<el-link> 如何在 v-for 中拼接 href

data() {
  return {
    baseUrl: process.env.VUE_APP_BASE_API,
  }
}
<ul 
  v-for="(content, index) in tag ? item.content.slice(0, 2) : item.content" 
  :key="index" 
  style="width:100%;margin:0;margin-left:0px;margin-top:3px"
>
  <el-popover placement="right-start" width="230" trigger="click">
    <div>
      <p style="line-height: 20px;">
        <span style="font-size: 14px;">日志标题:{{ content.notice }}</span>
      </p>
      <p style="line-height: 20px;">
        <div style="font-size: 14px;" class="gutter" :title="content.content" >
          日志内容:{{ content.content }}
        </div>
      </p>
      <!-- <p style="line-height: 20px;">
        <span style="font-size: 14px;">相关附件:{{ content.url }}</span>
      </p>  -->
      <p style="line-height: 20px;">
        <span style="font-size: 14px;">
          相关附件:
          <el-link :href="`${baseUrl}${content.url}`" :underline="false" target="_blank">
            <span> {{ content.urlname }} </span>
          </el-link>
        </span>
      </p> 
    </div>
    <el-button type="text" slot="reference">{{ content.notice }}</el-button>
  </el-popover>
</ul>

${baseUrl}${content.url} 这种写法不能拿到 content.url 的值

回复
1个回答
avatar
test
2024-07-09

看起来是没有问题的， ${baseUrl}${content.url} 应该是能够正确拼接出来正确的结果。

最好是可以提供一个最小复现，比如我这样的 👉 Playground Demo

answer image

<script setup>
import { ref } from 'vue'

const baseUrl = '/'

const tag = ref(1)
const list = ref({content:[]})

// 模拟数据请求
setTimeout(() => {
  list.value = {
    content: Array.from({length: 10}, (_, idx) => ({ url: `url-path-` + idx }))
  }
}, 3 * 1000)
</script>

<template>
  <div v-for="item in tag ? list.content.slice(0, 2) : list.content" :key="item.url">
    <el-link :href="`${baseUrl}${item.url}`">URL:{{ `${baseUrl}${item.url}` }}</el-link>
  </div>
</template>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容