Vue组件中整合Twig模板内容的策略与实践

{# plan.html.twig #}
{% block field %}
    <table id="plan_table">
      <caption>
        <h2> {{smth.name}} </h2>
      </caption>
      <tbody>
        {% for item in smth.items %}
        <tr>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock %}

<!-- PlanComponent.vue -->
<template>
  <div class="plan__content">
    <table id="plan_table">
      <caption>
        <h2>{{ planData.name }}</h2>
      </caption>
      <tbody>
        <!-- 使用v-for循环渲染表格行 -->
        <tr v-for="item in planData.items" :key="item.id">
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
        </tr>
        <tr v-if="planData.items.length === 0">
          <td colspan="2">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 假设 planData 通过 props 传入，或在组件内部通过 API 获取
export default {
  props: {
    planData: {
      type: Object,
      required: true,
      default: () => ({ name: '默认计划', items: [] }) // 提供默认值以防万一
    }
  },
  // 如果 planData 需要异步获取，可以在这里添加mounted生命周期钩子
  // mounted() {
  //   this.fetchPlanData(); // 调用方法从API获取数据
  // },
  // methods: {
  //   async fetchPlanData() {
  //     try {
  //       const response = await axios.get('/api/plan-data'); // 假设有API接口
  //       // 注意：如果planData是prop，不能直接修改。
  //       // 此时应将数据存储在本地data属性中，或通过emit事件通知父组件更新。
  //       // 例如：this.$emit('update:planData', response.data);
  //     } catch (error) {
  //       console.error('获取计划数据失败:', error);
  //     }
  //   }
  // }
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
.plan__content table {
  width: 100%;
  border-collapse: collapse;
}
.plan__content th, .plan__content td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>

<!-- PlanViewer.vue -->
<template>
  <div class="plan__content">
    <div v-if="loading">加载中...</div>
    <div v-else-if="error" class="error-message">{{ error }}</div>
    <!-- 使用v-html指令渲染从后端获取的HTML内容 -->
    <div v-else v-html="renderedTwigContent"></div>
  </div>
</template>

<script>
import axios from 'axios'; // 推荐使用axios进行HTTP请求

export default {
  data() {
    return {
      renderedTwigContent: '',
      loading: false,
      error: null,
    };
  },
  mounted() {
    this.fetchRenderedPlan(); // 组件挂载后立即获取内容
  },
  methods: {
    async fetchRenderedPlan() {
      this.loading = true;
      this.error = null; // 重置错误信息
      try {
        // 假设后端有一个 /api/render-plan-html 接口，返回已渲染的Twig HTML
        const response = await axios.get('/api/render-plan-html');
        this.renderedTwigContent = response.data;
      } catch (err) {
        console.error('获取Twig渲染内容失败:', err);
        this.error = '无法加载计划内容，请稍后再试。';
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要添加 */
.error-message {
  color: red;
  font-weight: bold;