AdonisJS框架中使用Vue.js实现下拉选单时选项显示undefined求助

问题根因 #

AdonisJS 默认使用的 Edge 模板引擎与 Vue 2 的变量插值语法存在冲突：两者均使用 {{ }} 作为变量占位符。你代码中的 {{ item.name }} 会先被 Edge 在服务端渲染阶段解析，由于服务端上下文不存在 item 变量，会直接输出空值/undefined，等到页面传递到前端、Vue 初始化完成时，已经没有可解析的插值表达式了，因此所有选项都显示 undefined。单独打开HTML文件时没有Edge模板的解析步骤，所以运行正常。

解决方法（任选其一即可） #

• 方法1：对 Vue 插值表达式添加 Edge 转义符
  Edge 模板中，在 {{ }} 前加 @ 即可跳过服务端解析，直接将插值表达式输出到前端。将你的下拉选项代码修改为：

  <option v-for="item in test" v-bind:value="item.name" >
      @{{ item.name }}
  </option>
  

• 方法2：修改 Vue 插值分隔符，避开与 Edge 的语法冲突
  初始化 Vue 时新增 delimiters 配置项，自定义 Vue 的插值标识，示例：

  new Vue({
    el: '#app',
    delimiters: ['[[', ']]'], // 新增这行，自定义插值分隔符为[[ ]]
    data: {
      test: [
        { id:1, name:"adam"},
        { id:2, name:"lena"},
        { id:3, name:"hamza"},
      ],
      Selected: "",
    }
  })
  

  对应修改模板中的插值表达式：

  <option v-for="item in test" v-bind:value="item.name" >
      [[ item.name ]]
  </option>
  

• 方法3：当作静态资源托管
  如果该页面不需要用到 Edge 模板的服务端渲染能力，直接把完整HTML文件放到 AdonisJS 项目的 public 目录下，直接访问静态文件即可跳过 Edge 解析，和单独打开HTML的效果完全一致。

验证方式 #

修改后右键查看页面源代码，确认对应的插值表达式（{{ item.name }} 或自定义的 [[ item.name ]]）完整出现在代码中即可。

内容的提问来源于stack exchange，提问作者Medical Doctor - Programmer