Vue

by ujjumaki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>
<div id="app">

  <div id="playerDiv">
    <div v-for="element in todos" class="eachPlayerDiv">
      {{element.text}}
    </div>
  </div>
</div>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:red;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:yellow;
  height: 30px;
}
</style>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "David", id: 1 },
      { text: "John", id: 2 },
      { text: "Alek", id: 3 },
      { text: "Joshua", id: 4},
      { text: "Jonny", id: 5},
      { text :"Sam", id:6}
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})