Vue.js组件中集成Twig模板的策略与实践

{# plan.html.twig #}
{% block field %}
    <table id="plan_table">
      <caption>
        <h2> {{ smth.name }} </h2>
      </caption>
      <tbody>
        {# 假设这里有更多基于smth数据的行 #}
        {% for item in smth.items %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.description }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock %}

<!-- Plan.vue -->
<template>
  <div class="plan">
    <table id="plan_table">
      <caption>
        <h2>{{ planData.name }}</h2>
      </caption>
      <tbody>
        <tr v-for="item in planData.items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.description }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    // 假设planData通过props从父组件传递，
    // 或者可以在mounted钩子中通过API请求获取
    planData: {
      type: Object,
      required: true,
      default: () => ({ name: '', items: [] })
    }
  },
  // 如果数据需要组件内部获取，可以这样：
  // data() {
  //   return {
  //     planData: { name: '', items: [] }
  //   };
  // },
  // async mounted() {
  //   try {
  //     const response = await fetch('/api/plan-data'); // 假设有API获取数据
  //     this.planData = await response.json();
  //   } catch (error) {
  //     console.error('Failed to fetch plan data:', error);
  //   }
  // }
};
</script>

<style scoped>
/* 样式 */
</style>

<!-- Example.vue -->
<template>
  <div>
    <button @click="showPlan">Show plan</button>
    <plan v-if="isPlanVisible" @closePlan="closePlan" :plan-data="myPlanData"></plan>
  </div>
</template>

<script>
import Plan from './Plan.vue';

export default {
  components: {
    Plan
  },
  data() {
    return {
      isPlanVisible: false,
      myPlanData: {
        name: '年度计划概览',
        items: [
          { id: 1, description: '完成项目A' },
          { id: 2, description: '启动项目B' }
        ]
      }
    };
  },
  methods: {
    showPlan() {
      this.isPlanVisible = true;
    },
    closePlan() {
      this.isPlanVisible = false;
    }
  }
};
</script>

// Symfony/Laravel (伪代码)
// Controller: PlanController.php
public function getPlanTableHtml(Request $request)
{
    // 假设smth数据从数据库或其他服务获取
    $smth = ['name' => '年度计划概览', 'items' => [...]];
    $html = $this->twig->render('plan.html.twig', ['smth' => $smth]);
    return new Response($html); // 返回HTML字符串
}

<!-- Plan.vue -->
<template>
  <div class="plan">
    <div v-if="isLoading">加载中...</div>
    <div v-else-if="error">{{ error }}</div>
    <div v-else v-html="renderedTwigHtml"></div>
  </div>
</template>

<script>
import axios from 'axios'; // 或者使用原生fetch API

export default {
  data() {
    return {
      renderedTwigHtml: null,
      isLoading: false,
      error: null
    };
  },
  methods: {
    async fetchTwigContent() {
      this.isLoading = true;
      this.error = null;
      try {
        // 假设后端API地址是 /api/plan-table
        const response = await axios.get('/api/plan-table');
        this.renderedTwigHtml = response.data; // response.data 包含纯HTML字符串
      } catch (err) {
        console.error('获取Twig内容失败:', err);
        this.error = '无法加载计划内容，请稍后再试。';
      } finally {
        this.isLoading = false;
      }
    }
  },
  mounted() {
    this.fetchTwigContent(); // 组件挂载时获取Twig内容
  }
};
</script>

<style scoped>
/* 样式 */
</style>

<!-- Example.vue -->
<template>
  <div>
    <button @click="showPlan">Show plan</button>
    <plan v-if="isPlanVisible" @closePlan="closePlan"></plan>
  </div>
</template>

<script>
import Plan from './Plan.vue';

export default {
  components: {
    Plan
  },
  data() {
    return {
      isPlanVisible: false
    };
  },
  methods: {
    showPlan() {
      this.isPlanVisible = true;
    },
    closePlan() {
      this.isPlanVisible = false;
    }
  }
};
</script>