如何在Vue.js方法中获取对象并在Twig中访问其值？

嘿，这个问题核心在于Twig和Vue的运行时机完全不同：Twig是服务器端模板引擎，页面发送到浏览器之前就已经渲染完毕；而Vue是客户端框架，等页面加载到浏览器后才会初始化并处理数据。所以你没法直接用Twig的{{ }}语法去访问Vue脚本里的this.projects数据，得换个思路来实现需求，下面给你两种常用方案：

方案一：从服务器端传递初始数据给Vue（推荐） #

如果你的projects数据是从服务器获取的，直接让后端把数据传给Twig模板，再注入到Vue的data里，这样Vue一开始就能拿到数据，同时也避免了在Vue里手动JSON.parse的步骤：

1. 后端把projects数据传递给Twig模板（比如PHP里的return $this->render('template.html.twig', ['projects' => $projects]);）
2. 在Twig模板里把数据注入到Vue实例中：

<div id="app">
  <!-- 这里用Vue的模板语法展示数据 -->
  <div v-for="project in projects" :key="project.id">
    <h5>{{ project.cluster }}</h5>
    <p>Name: {{ project.name }}</p>
    <p>ID: {{ project.id }}</p>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    // 用Twig的json_encode把服务器数据转成Vue能识别的格式
    projects: {{ projects|json_encode|raw }}
  }
});
</script>

方案二：如果数据是Vue从客户端获取的（比如API请求） #

如果projects是Vue通过前端请求（比如axios）或者你示例里的硬编码JSON获取的，那Twig已经渲染完页面了，只能用Vue的模板语法来展示数据，不能再用Twig的语法：

<div id="app">
  <!-- 只有Vue能识别这些指令和插值 -->
  <div v-if="projects.length">
    <div v-for="project in projects" :key="project.id">
      <h5>{{ project.cluster }}</h5>
      <p>{{ project.name }}</p>
    </div>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    projects: []
  },
  methods: {
    getProjects: function(){
      this.projects = JSON.parse('[{"cluster": "Demo", "name":"Joe", "id": 5454, "percentage": 100}]');
    }
  },
  mounted() {
    // 页面加载后调用方法获取数据
    this.getProjects();
  }
});
</script>

关键提醒 #

别把Twig的{{ }}和Vue的{{ }}搞混啦：Twig的插值是服务器端替换内容，Vue的插值是客户端动态渲染。如果在Twig里写{{ cluster.name }}，Twig会去自己的模板变量里找cluster，而不是Vue的数据，这就是你之前写法无效的原因～

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