Vue.js列表v-for循环生成元素正常但mustache语法无法渲染文本问题

开发者阿泽

2026-9-28

这个问题和Socket连接、Vue响应式更新机制没有关联，可按照以下方向排查：

优先排查服务端模板预解析冲突
如果你的index.html是经过服务端模板引擎（如Mustache、Jinja2、Thymeleaf、EJS等）渲染后返回给前端的，服务端会优先解析{{ }}语法，找不到对应变量就会直接输出空值，导致前端拿到的HTML里已经没有{{friend.text}}占位符，自然无法渲染内容。纯静态前端运行环境没有服务端预解析步骤，所以相同代码可以正常运行。
验证方法：打开浏览器开发者工具的Elements面板，查看对应li元素的内部内容，如果不存在{{friend.text}}文本即可确认该问题。
解决方案1：修改服务端模板配置，跳过对Vue插值语法的解析。
解决方案2：修改Vue的默认插值分隔符，避免和服务端模板语法冲突，配置示例如下：
```
var app = new Vue({
    el: '#app',
    // 将插值分隔符修改为[[ ]]
    delimiters: ['[[', ']]'],
    data: {
        messageContent: '',
        friends: [],
        messages: []
    }
})
```
对应模板中的插值写法同步修改为Friend:[[friend.text]]即可。
检查Vue实例挂载范围
确认存放好友列表的#friends div确实被完整包裹在id为app的元素内部，Vue只会解析挂载元素范围内的模板语法。
排查样式干扰
检查是否存在全局CSS规则，将li元素的文字颜色设置为和背景色一致、或是将字体大小设为0，导致文字视觉上不可见。
确认Vue全局配置
排查项目其他代码位置是否修改过Vue的默认插值分隔符，导致你写的{{ }}语法不被识别。