JSFiddle - React, Tailwind, and code Playground

by John Passmore

HTML

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <p>
    {{ users }}
  </p>
  <span>{{ users | pluck('first_name') }}</span>
  <span>{{ users | pluck('last_name') }}</span>
 
  
</div>

JavaScript

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

Vue.filter('extract', function (object))

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