Javascript Vue.js:已更改的计算属性不';我不明白
模板:Javascript Vue.js:已更改的计算属性不';我不明白,javascript,vue.js,Javascript,Vue.js,模板: <tbody> <tr v-for="item in transactionList" v-bind:class="{ 'almost-due': item.time_remaining != null && item.time_remaining < 60 }" data-transaction="${ item.id }"> <td>${ item.id }</td
<tbody>
<tr v-for="item in transactionList"
v-bind:class="{ 'almost-due': item.time_remaining != null && item.time_remaining < 60 }"
data-transaction="${ item.id }">
<td>${ item.id }</td>
<td>${ item.label }</td>
<td class="text-center minimal">${ item.status_label }</td>
<td class="text-center minimal">
<div v-if="item.time_remaining != null">
<span>${ item.time_remaining * 1000 | moment 'mm:ss' }</span>
</div>
<div v-if="item.time_remaining == null">
${ item.created_at_formatted }
</div>
</td>
</tr>
</tbody>
var Page = new Vue({
el: '#app',
data: {
transactions: [],
now: Date.now() / 1000
},
computed: {
transactionList: {
cache: false,
get: function () {
return this.transactions.map(function (transaction) {
// Calculate remaining time only if there is a due time
if (transaction.assignment_due_at != null) {
// remaining time = due time - now
transaction.time_remaining = Math.floor(
(new Date(transaction.assignment_due_at)).getTime() / 1000
- Page.now
);
} else {
transaction.time_remaining = null;
}
return transaction;
});
}
}
},
created: function () {
setInterval(function () {
Page.$data.now = Date.now() / 1000;
}, 1000);
}
});
问题是Vue没有看到事务。剩余时间已更改,因此不会更新DOM
我使用Chrome DevTools Vue插件,它确认事务。剩余时间每秒更新一次,但我在页面上看不到任何变化。看起来您在创建的函数中使用了数据属性时间
,而不是现在的
尝试:
好吧,我解决了。我创建了一个事务组件
<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>
最后,HTML变成了这样
<tbody>
<tr is="transaction" v-for="item in transactions" :model="item"></tr>
</tbody>
对不起,那是个打字错误。不过,我通过组件解决了这个问题。今晚我会把答案贴出来。
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);
}
<tbody>
<tr is="transaction" v-for="item in transactions" :model="item"></tr>
</tbody>