Vue.js模态框显示模板字符串而非数据，控制台正常的问题求助

问题根源 #

Vue模板不支持直接使用ES6模板字符串的${}语法，你写的${this.invoice_info.user_id}会被当成普通文本渲染，而非解析对应的数据值。

修复步骤 #

1. 替换为Vue插值语法
   Vue模板使用双大括号{{ }}进行数据插值，且模板上下文默认指向组件实例，无需添加this.。修改后的模态框代码：

<h5 class="modal-title font22think ml-4" id="exampleModalLabel">{{ invoice_info.user_id }}</h5>

2. 处理异步加载的边界情况
   由于invoice_info是通过异步请求获取的，初始状态为空数组，直接访问user_id可能触发undefined报错。可根据Vue版本做兼容处理：

• Vue 3（支持可选链）：

<h5 class="modal-title font22think ml-4" id="exampleModalLabel">{{ invoice_info?.user_id }}</h5>

• Vue 2（不支持可选链，用三元表达式或v-if）：

<!-- 三元表达式 -->
<h5 class="modal-title font22think ml-4" id="exampleModalLabel">{{ invoice_info.user_id ? invoice_info.user_id : '' }}</h5>

<!-- 或者用v-if控制渲染时机 -->
<h5 v-if="invoice_info.user_id" class="modal-title font22think ml-4" id="exampleModalLabel">{{ invoice_info.user_id }}</h5>

补充说明 #

${}语法仅能在JavaScript代码块（比如组件的methods、computed、回调函数中）使用，不能直接写在模板的HTML内容里。Vue模板有自身的数据绑定规则，必须遵循其语法规范才能正确渲染数据。

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