Sails.js项目中Vue.js绑定img的src与a标签的href不生效如何解决

问题原因 #

该问题由两个常见错误共同导致：

1. Sails 默认使用 EJS 作为服务端模板引擎，插值标记和 Vue 一致为 {{ }}，你在模板中写的 {{ event.imageurl }} 会优先被 Sails 服务端解析，由于 event 是前端 Vue 变量，服务端不存在对应值，最终输出到浏览器的是原样字符串，被 URL 编码后就会变成 %7B%7B%20event.id%20%7D%7D 格式。
2. v-bind（简写 :）的属性值为原生 JS 表达式，不能在内部使用 {{ }} 插值，如果你添加 : 后写法为 :href="http://localhost:1337/detail/{{ event.id }}"，本身属于 Vue 语法错误，自然无法生效。

修复步骤 #

第一步：修正 v-bind 语法 #

v-bind 内直接写 JS 表达式完成地址拼接，不要加 {{ }}，两种正确写法如下：

<!-- 字符串拼接写法 -->
<img :src="event.imageurl" alt="Placeholder image" />
<a class="title is-4" :href="'http://localhost:1337/detail/' + event.id">{{ event.eventname }}</a>

<!-- 模板字符串写法 -->
<a class="title is-4" :href="`http://localhost:1337/detail/${event.id}`">{{ event.eventname }}</a>

第二步：解决插值标记冲突（三选一即可） #

方案A：修改 Vue 插值分隔符（全局生效，推荐）

在 Vue 实例初始化时，将默认插值标记修改为不会和 EJS 冲突的格式，例如 [[ ]]：

// Vue 3 写法
const app = createApp({
  delimiters: ['[[', ']]'],
  // 其余组件配置
})

// Vue 2 写法
new Vue({
  delimiters: ['[[', ']]'],
  // 其余实例配置
})

修改后，模板内 Vue 插值统一使用新分隔符即可：

<a class="title is-4" :href="`http://localhost:1337/detail/${event.id}`">[[ event.eventname ]]</a>

方案B：修改 Sails EJS 模板分隔符

打开 Sails 项目 config/views.js 配置文件，修改 EJS 插值标记：

module.exports.views = {
  extension: 'ejs',
  // 新增该行，将EJS插值标记修改为 {% %}
  delimiters: '{%',
  // 其余原有配置
}

修改后服务端模板使用 {% %} 做插值，原 Vue {{ }} 写法可直接正常使用。

临时局部解法（无需修改全局配置）

如果只需要调整少量页面，可在 Vue 插值前加反斜杠转义，让 EJS 跳过解析，直接输出到浏览器给 Vue 处理：

<a class="title is-4" :href="`http://localhost:1337/detail/${event.id}`">\{{ event.eventname }}</a>

内容的提问来源于stack exchange，提问作者Chak Nam CHAN