JSFiddle - React, Tailwind, and code Playground

by jakhodeM

HTML

<div id="app">
  <div v-if="activeItems && activeItems.length > 0">
  {{ activeItems }}
      <ul>
        <li v-for="item in activeItems" :key="item.id">
          {{item.name}}
        </li>
      </ul>
  </div>
</div>

Vue

new Vue({
	el: '#app',
  data() {
  	return {
    	list: {
      "john" : true,
      "jane" : true,
      "lucy" : false
      },
      
    };
  },
  computed: {
  	activeItems() {  
     /** expected 
      return `this.list` as an Array of object and filter by if active is true
          Expected output
          [
            {name: 'John', active: true},
            {name: 'Jane', active: true}
          ]
    **/
    return Object.keys(this.list)
             .filter(key => this.list[key] === true)
    }
  },
  mounted(){
  	console.log(this.list);
  }
});