Stock Market Stock List VueJS integration of table with axios to get JSON data

Stock Market Stock List VueJS integration of table with axios to get JSON data

by Financial Modeling Prep

HTML

<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/v-data-table/dist/v-data-table.js"></script>
<div id="app">
   <div v-if="loaded">
    <data-table :data="financials" :filter-key="searchQuery">
    </data-table>
  </div>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
  margin: 0;
}

table {
  width: 100%;
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
  width: 100%;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  text-align: center;
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}



input {
    outline: none;
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button {
    display: none;
}

input[type=search] {
    background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
    border: solid 1px #ccc;
    padding: 9px 10px 9px 32px;
    width: 300px;
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

input[type=search]:focus {
    width: 400px;
    background-color: #fff;
    border-color: lightseagreen;
    -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
    -moz-box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
    box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
}

input::-webkit-input-placeholder {
    color: #999;
}

input:-moz-placeholder {
    color:...

JavaScript

// https://financialmodelingprep.com/developer/docs
var app = new Vue({
  el: "#app",
  data: {
    url: 'https://financialmodelingprep.com/api/v3/quote-short/AAPL?apikey=demo',
    financials: [],
    loaded: false,
    searchQuery: '',
    stockName: 'Netflix'
  },
  created: function() {
    var self = this
    axios
      .get(this.url)
      .then((response) => {
        this.financials = response.data;
        this.loaded = true;
      })
      .catch((error) => {
        alert('error');
      })
  }
});