在Vue.js组件中集成和渲染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.label }}</td>
            <td>{{ item.value }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
{% endblock %}

<!-- PlanTable.vue -->
<template>
  <table id="plan_table">
    <caption>
      <h2>{{ planData.name }}</h2>
    </caption>
    <tbody>
      <tr v-for="item in planData.items" :key="item.label">
        <td>{{ item.label }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'PlanTable',
  props: {
    planData: {
      type: Object,
      required: true,
      default: () => ({ name: 'Default Plan', items: [] })
    }
  }
};
</script>

<style scoped>
/* 您的组件样式 */
</style>

<!-- example.vue -->
<template>
  <div>
    <button @click="showPlan">Show plan</button>
    <plan-modal v-if="isPlanVisible" @closePlan="closePlan">
      <!-- 在这里使用PlanTable组件，并通过props传递数据 -->
      <plan-table :plan-data="currentPlanDetails"></plan-table>
    </plan-modal>
  </div>
</template>

<script>
import PlanModal from './PlanModal.vue'; // 假设这是您的模态框组件
import PlanTable from './PlanTable.vue';

export default {
  components: {
    PlanModal,
    PlanTable
  },
  data() {
    return {
      isPlanVisible: false,
      currentPlanDetails: {
        name: '月度计划',
        items: [
          { label: '服务费', value: '100元' },
          { label: '有效期', value: '30天' }
        ]
      } // 这些数据应通过API从后端获取
    };
  },
  methods: {
    showPlan() {
      this.isPlanVisible = true;
      // 实际应用中，您可能会在此处或组件挂载时从后端API获取currentPlanDetails
    },
    closePlan() {
      this.isPlanVisible = false;
    }
  }
};
</script>

// 概念性后端代码 (例如 Symfony Controller)
// src/Controller/ApiController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ApiController extends AbstractController
{
    #[Route('/api/plan-table-html', name: 'api_plan_table_html')]
    public function getPlanTableHtml(): Response
    {
        // 假设您从数据库或其他服务获取数据
        $smth = [
            'name' => '年度计划',
            'items' => [
                ['label' => '服务费', 'value' => '1000元'],
                ['label' => '有效期', 'value' => '365天']
            ]
        ];

        // 渲染Twig模板并返回HTML字符串
        return $this->render('plan.html.twig', ['smth' => $smth]);
    }
}

<!-- PlanWithRenderedTwig.vue -->
<template>
  <div v-if="htmlContent" v-html="htmlContent"></div>
  <div v-else>加载中...</div>
</template>

<script>
import axios from 'axios'; // 您也可以使用原生的fetch API

export default {
  name: 'PlanWithRenderedTwig',
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
    this.fetchTwigContent();
  },
  methods: {
    async fetchTwigContent() {
      try {
        const response = await axios.get('/api/plan-table-html'); // 调用后端API
        this.htmlContent = response.data;
      } catch (error) {
        console.error('Failed to load Twig content:', error);
        this.htmlContent = '<p style="color: red;">内容加载失败，请稍后再试。</p>';
      }
    }
  }
};
</script>

<!-- example.vue -->
<template>
  <div>
    <button @click="showPlan">Show plan</button>
    <plan-modal v-if="isPlanVisible" @closePlan="closePlan">
      <!-- 在这里嵌入加载的Twig内容 -->
      <plan-with-rendered-twig></plan-with-rendered-twig>
    </plan-modal>
  </div>
</template>

<script>
import PlanModal from './PlanModal.vue';
import PlanWithRenderedTwig from './PlanWithRenderedTwig.vue';

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