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

Posted 2023-02-23

【中文标题】如何使用嵌套的 json 对象填充 vue 条件库中的 vue 组件

【英文标题】：How do I populate a vue component inside vue condition base with nested json objects

【发布时间】：2021-02-11 21:03:01

【问题描述】：

我有一个项目的 json 文件，其中一家公司可以执行多个项目，而其他一些公司只执行一个项目。我希望能够在公司徽标为 click 时显示项目。默认情况下，项目是隐藏的，直到单击公司的图标。我有一个 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');

【问题讨论】：

在徽标上添加@click 以触发相应的方法

非常感谢@Daniel_Knights 我认为问题是因为我错误地添加了绑定属性。我使用的是 v-item 而不是 :item.

【参考方案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>