Trying to figure out how to merge data from two different sources to display in a single table. One source is created within my Vue instance, while the other is imported from an API. Any suggestions on how to achieve this?
HTML:
<div class="ui container" id="app">
<br>
<div class="ui two column divided grid">
<div class="row">
<div class="ten wide column">
<table class="ui unstackable green table">
<thead>
<tr>
<th>Instrument</th>
<th class="right aligned">Position</th>
<th class="right aligned">Price</th>
<th class="right aligned">Total</th>
<th class="right aligned">%</th>
</tr>
</thead>
<tbody>
<tr v-for="item in watchlist">
<td>{{ item.instrument }}</td>
<td class="right aligned">{{ item.position }}</td>
<td class="right aligned"></td>
<td class="right aligned"></td>
<td class="right aligned"></td>
</tr>
</tbody>
</table>
</div>
<div class="six wide column" :attribute="priceData">
<table class="ui unstackable red table">
<thead>
<tr>
<th class="center aligned">Coin</th>
<th class="center aligned">Price</th>
</tr>
</thead>
<tbody>
<tr v-for="coin in prices">
<td>{{ coin.name }}</td>
<td class="center aligned">{{ coin.price_usd }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Currently, I have two separate tables displaying data that I want to merge into a single table.
Vue:
new Vue({
el: '#app',
data: {
watchlist: [
{ instrument: 'Artbyte', position: 10000 },
{ instrument: 'Civic (CVC)', position: 1000 },
{ instrument: 'IOTA', position: 600 },
{ instrument: 'Basic Attention Token', position: 600 },
{ instrument: 'Sentiment (SAN)', position: 500 },
{ instrument: 'TenX', position: 400 },
{ instrument: 'OmiseGo', position: 100 },
{ instrument: 'EOS', position: 200 },
{ instrument: 'Litecoin', position: 30 },
{ instrument: 'Ethereum', position: 10 },
{ instrument: 'Bitcoin', position: 2 },
{ instrument: 'District0x', position: 2000 },
{ instrument: 'Aragon', position: 60 },
{ instrument: 'LBRY Credits', position: 200 }
],
prices: []
},
computed: {
priceData: function () {
var t = this
axios.get('https://api.coinmarketcap.com/v1/ticker/')
.then(function (response) {
t.prices = response.data
})
.catch(function (error) {
console.log(error)
})
},
getPrices: function () {
return this.price
}
}
})
Check out this code snippet on JSFiddle