0👍
Your code looks perfectly fine. A reduced example seems to work and I could not find a critical difference to your code: https://codepen.io/tuelsch/pen/XRXvZy
Allthough, you may want to consider to transfer your template markup into a separate tempalte. Your code would look like this:
<div id="app"></div>
<template id="list">
<ul class="collection">
<li v-for="item in items" class="collection-item avatar" :key="item._id">
<span class="title">{{ item.pair }}</span>
<p>{{ item.openDate }} <br>
{{ item.direction}}
</p>
<a href="/list/{{ item._id }}" class="secondary-content"><i class="material-icons">send</i></a>
</li>
</ul>
</template>
<script type="text/javascript">
var app = new Vue({
el: '#app',
template: '#list',
data: {
items: []
},
mounted: function() {
var that = this;
axios.get('/api/journal')
.then(function(response) {
if(response.status = 200) {
that.items = response.data;
console.log(that.items);
} else {
console.log('error');
}
})
.catch(function(error) {
console.log(error);
});
},
methods: {
}
})
</script>
Source:stackexchange.com