javascript - Vue中基于多个值的条件渲染

Question

希望有人可以提供帮助，因为我已经为此苦苦挣扎了几天。

我是 Vue 新手，我的 JavaScript 技能相当平均。

我希望根据人们在数组中的工作角色显示一个颜色编码的图标。

绿色 - Array 包含开发人员和产品经理

黄色 - 数组容器开发人员

红色 - 阵列不包含开发人员或产品经理

该阵列被分组为团队并设置如下：

0 { 0 { name: Bob Sinclair
        teamname: Francs
        email: [e-mail]
        job: Product Manager
        type: Team Member
      }
  }
1 { 0 { name: Neil Jones
        teamname: Dream Team
        email: [e-mail]
        job: Developer
        type: Team Member
      }

    1 { name: Jim Cairns
        teamname: Dream Team
        email: [e-mail]
        job: Product Manager
        type: Team Member
      }
    2 { name: Craig Ferguson
        teamname: Dream Team
        email: [e-mail]
        job: Designer
        type: Team Member
      }
  }
2 { 0 { name: Stuart Daly
        teamname: SuperNova
        email: [e-mail]
        job: Developer
        type: Team Member
      }

    1 { name: Martin Black
        teamname: SuperNova
        email: [e-mail]
        job: Sales
        type: Team Member
      }
    2 { name: Rebecca Forbes
        teamname: SuperNova
        email: [e-mail]
        job: Other
        type: Team Member
      }
  }

这是我正在尝试做的当前 HTML：

<div class="card-footer">
   <img class="group-image" v-for="(team, index) in teams" :key="team[0].teamname" v-if="developer == productManager" src="/Images/green%20group.png">
   <img class="group-image" v-for="(team, index) in teams" :key="team[0].teamname" v-if="developer"src="/Images/yellow%20group.png">
   <img class="group-image" v-for="(team, index) in teams" :key="team[0].teamname" v-if="neither" src="/Images/red%20group.png">
   <a href="https://community.global.hsbc/sites/DigiHub/SitePages/Hack-Chat.aspx" target="_blank">
   <img class="chat-image" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/chat.png">
</div>

这是我的 JS（3 个数据对象的 if 语句位于底部）：

    var appTeamCards = new Vue({
    el: '#app-teams',
    data: {
        teams: [],
        developer: false,
        productManager: false,
        neither: false
    },
    mounted: function() {
        this.getTeams();
    },
    methods: {
        getTeams: function() {
            var self = this;
            $.ajax({
                url: '/sites/DigiHub/_api/web/lists/getbytitle(\'global-hackathon-reg\')/items?$orderby=Modified desc',
                method: "GET",
                headers: {
                    "Accept": "application/json;odata=verbose"    
                },
                success: function (data) {
                    var posts = data.d.results;
                    readData(posts);
                    console.log(self.teams);
                },
            });

            function readData(data) {
                self.teams = groupBy(data, "teamname");  
            };

            function groupBy(collection, property) {
                var i = 0, val, index,
                    values = [], result = [];
                for (; i < collection.length; i++) {
                    val = collection[i][property];
                    index = values.indexOf(val);
                    if (index > -1)
                        result[index].push(collection[i]);
                    else {
                        values.push(val);
                        result.push([collection[i]]);
                    }
                    // console.log(collection[i].hackertype);
                    if (collection[i].hackertype == "Developer") {
                        self.developer = true;
                    } else {
                        self.developer = false;
                    }

                    if (collection[i].hackertype == "Product Manager") {
                        self.productManager = true;
                    } else {
                        self.productManager = false;
                    }

                    if (collection[i].hackertype != "Product Manager" && collection[i].hackertype != "Developer") {
                        self.neither = true;
                    } else {
                        self.neither = false;
                    }

                    // console.log(self.developer);
                    // console.log(self.productManager);
                    // console.log(self.neither);
                }
                return result;

            }

        }
    }
}); 

目前的代码不显示任何图标，我得到的唯一其他结果是它们都显示为绿色。

如果有人能指出我正确的方向，我将不胜感激。

提前致谢

标签： javascriptvue.js