JSFiddle - React, Tailwind, and code Playground

by von

HTML

created() {
    
    let _this = this
    
    let dummyData = [
      { 'Barcelona' : [ { Comp: 1 }, { Conf: 2 }, { Cons: 3 } ] },
      { 'Real Madrid' : [ { Comp: 4 }, { Conf: 5 }, { Cons: 6 } ] },
      { 'Liverpool' : [ { Comp: '' }, { Conf: 0 }, { Cons: 6 } ] },
      { 'Manchester United' : [ { Comp: '' }, { Conf: 0 }, { Cons: 6 } ]}
    ]
    dummyData = "{\"Team\":[{\"Comp\":},{\"Conf\":3},{\"Cons\":1}],\"Team B\":[{\"Comp\":1},{\"Conf\":1},{\"Cons\":1}]}"
    console.log(JSON.parse(dummyData))
    setTimeout(function () {
      _this.scores = JSON.parse(dummyData)
    }, 2000)
  },
  methods: {
    willBeChecked: function (group) {
      return group.every(function(item) {
        if (item.Conf)
          return item.Conf > 0
        if (item.Comp)
          return item.Comp > 0
        if (item.Cons)
          return item.Cons > 0
      })
    },
    willShowDiv: function (group) {
      return group.some(function(item) {
        if (item.Conf)
          return item.Conf < 4
        else if (item.Comp)
          return item.Comp < 4
        else if (item.Cons) 
          return item.Cons < 4
        else
          return true
      })
    }
  }