Flask与Vue.js集成时下拉选择列表选项不显示问题求助

• 这个问题是Flask默认模板引擎Jinja2与Vue.js的插值语法冲突导致的：两者默认都使用{{ 变量名 }}作为插值表达式标识，你在模板中写的{{ opt }}会先被Jinja2解析，由于你没有给渲染模板的render_template方法传入名为opt的变量，Jinja2会直接把这部分内容替换为空字符串，所以Vue运行时无法拿到要渲染的选项文本。

有三种常用的解决方式，按需选择即可：

方案1：使用Jinja2的raw标签标记无需解析的内容 #

在需要保留Vue插值语法的代码外层包裹{% raw %}和{% endraw %}，告诉Jinja2这部分内容不需要解析，直接输出即可，你的select代码修改后如下：

<div class="col-sm-10">
    <select class="form-select" v-model="reftools">
        <option value="" selected="true" disabled="disabled"></option>
        <option v-for="opt in status_reftools" v-bind:value="opt">{% raw %}{{ opt }}{% endraw %}</option>
    </select>
</div>

如果页面中Vue控制的区域较大，也可以直接把整个Vue挂载节点（#section_formulaire）包裹在raw标签对里，不需要逐个修改插值内容。

方案2：修改Vue的默认插值分隔符 #

修改Vue的配置，将插值语法的分隔符换成和Jinja2不冲突的格式，比如[[ 变量名 ]]，修改你的JS代码中创建Vue实例的部分：

// 原来的创建代码
// Vue.createApp(Form).mount('#section_formulaire');

// 修改后的代码
const app = Vue.createApp(Form)
// 自定义插值分隔符
app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount('#section_formulaire')

之后HTML里的Vue插值语法同步修改为对应的格式即可：

<option v-for="opt in status_reftools" v-bind:value="opt">[[ opt ]]</option>

方案3：将前端页面作为静态文件提供 #

如果你不需要在这个HTML页面中使用Jinja2的模板能力，可以直接把HTML文件放到Flask项目的static文件夹下，直接访问静态文件资源，不走Jinja2的模板渲染流程，自然不会有语法冲突问题。

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