Quiero dar color al texto después de dos fechas con vue js, pero no pude encontrar una solución. Ejemplo: quiero que StartDate Today y End Date 05.10.2021 rojos en consecuencia. pero quiero hacer esta condición con v-bind ¿es posible?
<tr v-for="(item, i) in attributes" :class="today ? 'greater' : 'today'"> <td>{{ today ,item.due_date | remainingday}}</td> </tr> export default { data() { return { type: 'sales_invoices', attributes: [], start: new Date().toLocaleDateString, } }, async created() { const res = await this.callApi('get', this.type) if (res.status === 200) { this.attributes = res.data.data } }, computed: { today(){ const startY = new Date(this.start.split(".").reverse().join(".")) const end = new Date('05.10.2021'.split(".").reverse().join(".")) const difDays = Math.floor((startY.getTime() - end.getTime()) / (1000 * 3600 * 24)) return difDays > 0 }, },aplicación.js
Vue.filter('remainingday', function (startDate, endDate) { const start = new Date(startDate.split(".").reverse().join(".")) const end = new Date(endDate.split(".").reverse().join(".")) if(start.toDateString() === end.toDateString()) { return 'TODAY' } const difDays = Math.floor((start.getTime() - end.getTime()) / (1000 * 3600 * 24)) return difDays > 0 ? `PAYMENT DELAYED FOR ${difDays} DAYS ` : `${difDays * -1} DAYS LEFT` });Puedes probar con el enlace de clase y el método:
new Vue({ el: '#demo', data(){ return { start: new Date(), attributes: [{due_date: '30.10.2021'}, {due_date: '07.10.2021'}, {due_date: '03.10.2021'}] } }, methods: { remainingday (startDate, endDate) { const dates = startDate.toLocaleDateString() + ' ' + endDate const start = new Date(startDate) const end = new Date(endDate.split(".").reverse().join("-")) if(start.toDateString() === end.toDateString()) return {dat: `${dates} - TODAY`, cl: 'today'} const difDays = Math.ceil((start.getTime() - end.getTime()) / (1000 * 3600 * 24)) return difDays > 0 ? {dat: `${dates} - PAYMENT DELAYED FOR ${difDays} DAYS`, cl: 'greater'} : {dat: `${dates} - ${difDays * -1} DAYS LEFT`, cl: ''} } } }) Vue.config.productionTip = false Vue.config.devtools = false .today { color: blue; } .greater { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <table> <tr v-for="(item, i) in attributes" :key="i"> <td :class="remainingday(start, item.due_date).cl">{{ remainingday(start, item.due_date).dat }}</td> </tr> </table> </div>