JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p></p>
  <p>users - an Array of Objects: </p><br>
    <div v-for="u in users">
    
      {{u}}
 </div>
  <br>
  <p>Extract First names and Last names as separate Arrays with filter pluck  </p>
  <br>
  <div>
    <span>{{ users | pluck('first_name') }}</span>
  </div>
  <div> 
    <span>{{ users | pluck('last_name') }}</span>
  </div> 
</div>

JavaScript

Vue.filter('pluck', function (objects, key) {
    return objects.map(function(object) { 
    	return object[key];
    });
});

new Vue({
	el: '#app', 
    data: {
    	users: [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos"
        }
        ]
    }
});