JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
Without filter
<div v-for="contract in contracts">
  <p :style="{color: '#'+contract.color}">{{contract.id}}) {{contract.name}} / Color: {{contract.color}}</p>
</div>

With filter id=4
<div v-for="contract in filteredContracts">
  <p :style="{color: '#'+contract.color}">{{contract.id}}) {{contract.name}} / Color: {{contract.color}}</p>
</div>

JavaScript

new Vue({
  el: 'body',
  data: {
    route_param_id: 4,
    contracts: [{
      id:1, name: "Painted Gates", color: "990000"
    }, {
      id : 2, name : "dfdffdf", color: "00cc00"
    }, {
      id : 4, name : "Something Else", color: "336699"
    }]
  },
  computed: {
    filteredContracts: function() {
      var _self = this;
      return this.contracts.filter(function(contract) {
        return contract.id === _self.route_param_id
      })
    }
  }
})