0👍
It looks like you have the data property time
in stead of now
in the created
function
Try:
created: function () {
setInterval(function () {
Page.$data.now = Date.now() / 1000;
}, 1000);
}
- [Vuejs]-V-show on v-for creates unwanted return transition
- [Vuejs]-Google Maps API – All markers share the same infowindow
0👍
Alright, I solved it. I created a Transaction
component,
<script> /* Javascript */
var Transaction = Vue.extend({
template: '#transaction-item-template',
props: {
model: Object
},
computed: {
time_remaining: function () {
if (this.model.assignment_due_at == null) {
return null;
}
return Math.max(0, Math.floor(
(new Date(this.model.assignment_due_at)).getTime() / 1000
- Page.now
))
}
}
});
</script>
<script type="text/x-template" id="transaction-item-template"> /* Template */
<tr :class="{ 'almost-due': time_remaining != null && time_remaining < 60 }"
data-transaction="${ model.id }">
<td>${ model.id }</td>
<td>${ model.label }</td>
<td class="text-center minimal">${ model.status_label }</td>
<td class="text-center minimal">
<div v-if="time_remaining != null">
<span>${ time_remaining * 1000 | moment 'mm:ss' }</span>
</div>
<div v-if="time_remaining == null">
${ model.created_at_formatted }
</div>
</td>
</tr>
</script>
And I changed the Vue instance,
var Page = new Vue({
el: '#app',
data: {
transactions: [],
now: Date.now() / 1000
},
methods: {
addTransaction: function (transaction) {
this.transactions.unshift(transaction);
},
updateTransaction: function (transaction) {
var index = _.findIndex(this.transactions, {id: transaction.id});
if (index > -1) {
this.transactions.$set(index, transaction);
} else {
this.transactions.push(transaction);
}
}
},
components: {
'transaction': Transaction
},
created: function () {
init();
}
});
function init() {
setInterval(function () {
Page.now = Date.now() / 1000;
}, 1000);
}
And finally, HTML became this,
<tbody>
<tr is="transaction" v-for="item in transactions" :model="item"></tr>
</tbody>
Source:stackexchange.com