如何用嵌套的json对象填充vue条件库中的vue组件？

Question

我有一个项目的json文件，其中一家公司可以执行多个项目，而其他一些公司只执行一个项目。我希望能够显示该项目(S)时，公司的标志是点击。默认情况下，这些项目是隐藏的，直到用户单击公司的图标。我有一个vue if绑定，以显示如果点击和一个组件，以显示项目。我如何调整我的代码来做到这一点。我的代码如下所示：

<div class="container" v-if="seen">
   <header class="section-header">
       <h3>{{ projects }}</h3>
   </header>
   <div class="row" id="display-projects">
      <project-executed
          v-for="project in projects"
          v-icon="project.icon"
          v-icon-color="project.color"
          v-title="project.title"
          v-description="project.description"
      ></project-executed>
   </div>
</div>

const app = Vue.createApp({
    data() {
        return {
            seen: false,
            projects: "Projects",
            unicef:[        
                {
                  "icon": "ion-ios-analytics-outline",
                  "color": "#ff689b",
                  "title": "UNICEF Nigeria – Drivers of Violence Against Children",
                  "description": "VKM in 2017/ 2018 provided consulting services to UNICEF Child Protection section. We conducted the Drivers of Violence Against Children study which required a systematic review of the literature, secondary data analysis and an interventions’ mapping across four focal states (Lagos, Cross River, Gombe and Plateau) of the country."
                },
                {
                  "icon": "ion-ios-bookmarks-outline",
                  "color": "#e9bf06",
                  "title": "UNICEF Nigeria – Time to teach: Determinants of Teacher Absenteeism in Sub-Saharan Africa",
                  "description": "VKM was identified by UNICEF in 2018 to lead the Nigeria component of a multi-country study on the determinants of teacher absenteeism in sub-Saharan Africa. VKM has so far participated in a multi-country training in Ghana and preparing for the data collection exercise which will include key informant interviews, focus group discussions, survey of primary school teachers identified and an assessment of primary schools studied."
                },
                {
                  "icon": "ion-ios-paper-outline",
                  "color": "#3fcdc7",
                  "title": "UNICEF Nigeria – Iron-Folic Acid Supply Chain Assessment in Northern Nigeria",
              "description": "VKM was contracted by UNICEF in January 2019 to conduct an assessment of the Iron-Folic Acid supply chain system in six states (Jigawa, Katsina, Kebbi, Sokoto, Yobe, Zamfara) in Northern Nigeria."
                }   
           ],
           drpc:
             {
               "icon": "ion-ios-speedometer-outline",
               "color": "#41cf2e",
               "title": "Policy and Strategic Plan Development and Research",
               "description": "VKM has expertise in the development of national level policies and strategic plans. Our chief executive led the development of the Nigeria Health Information System Strategic Plan (2014-2018) and the Sierra Leone Health Information System Strategic Plan (2017-2021)."
            },
            fhi: 
              {
                "icon": "ion-ios-world-outline",
                "color": "#d6ff22",
                "title": "Research on Civil Registration and Vital Statistics (CRVS) System",
                "description": "VKM has carried out several studies on birth registration in Nigeria collaborating with researchers across the world in the process."
            },
            jsi:
              {
                "icon": "ion-ios-clock-outline",
                "color": "#4680ff",
                "title": "Health Information Systems Strengthening",
                "description": "VKM developed the Nigeria Health Facility Registry (HFR) for the Federal Ministry of Health. The project was funded by USAID through the MEASURE Evaluation project under an institutional contract with VKM."
            },
            projects: null
        }
    },
            methods: {
                showUnicefProjects() {
                    this.seen = true;
                    this.projects = this.unicef;
                },
                showFHIProjects() {
                    this.seen = true;
                    this.projects = this.fhi;
                },
                showJSIProjects() {
                    this.seen = true;
                    this.projects = this.jsi;
                },
                showDRPCProjects() {
                    this.seen = true;
                    this.projects = this.drpc;
                },
            }
        });

        app.component('project-executed', {
            props: ['icon', 'icon-color', 'title', 'description'],
            template: `
                <div class="col-md-6 col-lg-5"
                    data-wow-delay="0.1s" data-wow-duration="1.4s">
                    <div class="box">
                        <div class="icon">
                            <i class="{{icon}}" style="color: {{icon-color}}"></i>
                        </div>
                        <h4 class="title">
                            <a href="">{{title}}</a>
                        </h4>
                        <p class="description">
                            {{description}}
                        </p>
                    </div>
                </div>
            `
        });

        app.mount('#display-projects');

Answer 1

问题是，在使用这里的组件时，我错误地试图绑定道具。因此，这不会显示项目，因为绑定没有正确完成。

<div class="container" v-if="seen">
   <header class="section-header">
       <h3>{{ projects }}</h3>
   </header>
   <div class="row" id="display-projects">
      <project-executed
          v-for="project in projects"
          :icon="project.icon"
          :icon-color="project.color"
          :title="project.title"
          :description="project.description"
      ></project-executed>
   </div>
</div>