如何在Vue的<a>标签href属性中使用绑定变量？

嘿，我之前也踩过这个坑！你遇到的问题主要是:href的表达式写法不对，而且没正确引用Buefy表格行的props.row数据。直接给你能正常运行的正确写法：

<template #cell(ip)="props">
  <a :href="`http://example.com/${props.row.ip}`">{{ props.row.ip }}</a>
</template>

为什么你之前的写法失效？ #

• 第一次尝试的<a href="http://example.com/{{ip}}">报错，是因为Vue已经不再支持在HTML属性中使用{{}}插值，必须用v-bind（或简写:href）绑定动态属性，这一步你改方向是对的。
• 后来写的:href="http://example.com/ip"问题很明显：这里的ip会被Vue当成全局变量（而非当前行的属性），而且整个URL没加引号或模板字符串包裹，Vue会把它判定为无效的JS表达式，直接导致模板失效。

另一种可选写法 #

如果你不习惯ES6模板字符串，也可以用传统的字符串拼接方式实现：

<template #cell(ip)="props">
  <a :href="'http://example.com/' + props.row.ip">{{ props.row.ip }}</a>
</template>

关键注意点 #

在Buefy表格里，必须通过作用域插槽的props.row来访问当前行的数据——这是表格组件提供的固定上下文，直接写ip是拿不到行内数据的，必须加上props.row.前缀才能正确指向当前行的ip字段。

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