I am trying to create a calendar like in the below:
As you see I have tickets object and according to the date of these tickets, I am displaying them. What I need to do, as you see in the picture I want to display a text 'No available ticket' when it is empty. For example, for Monday and Tuesday (actually all days except Wednesday). So to take the ticket, I am filtering tickets:
findTickets(tickets, date) {
return tickets.filter((ticket) => {
return (
ticket.date.getDate() === date.getDate() &&
ticket.date.getMonth() === date.getMonth() &&
ticket.date.getFullYear() === date.getFullYear() &&
this.getWeekNumber(ticket.date) === this.currentWeekNumber
);
});
},
And basically display inside the table with v-for:
<tr class="list-content" v-for="ticket in findTickets(tickets, date)">
<td>{{ ticket.time }}</td>
<td>{{ ticket.date }}</td>
<td>{{ ticket.name }}</td>
</tr>
So do you know how can I write 'no available date' when the ticket is empty?
Instead of calling findTickets()
directly in the HTML you could call findTickets()
in the Javascript code and use a list directly in the v-for
loop. You can use v-if
to check if the tickets
array is empty, if so, print a message.
<tr v-for="ticket in tickets" v-bind:key="ticket.name">
<td>{{ ticket.time }}</td>
<td>{{ ticket.date }}</td>
<td>{{ ticket.name }}</td>
</tr>
<div v-if="tickets.length == 0">No available tickets</div>
This is the data:
data: function () {
return {
tickets: [],
};
},
For this example the findTickets()
method should return an empty array if there's no tickets.
methods: {
findTickets() {
// Here you do your stuff.
// Let's say you found your tickets
var ticketsFound = true;
if (ticketsFound) {
this.tickets = [
{
time: "11:02",
date: "23/85/2009",
name: "Ticket 1",
},
{
time: "11:02",
date: "23/85/2009",
name: "Ticket 2",
},
{
time: "11:02",
date: "23/85/2009",
name: "Ticket 3",
},
{
time: "11:02",
date: "23/85/2009",
name: "Ticket 4",
},
];
} else {
this.tickets = [];
}
},
}
And then you only need to call the findTickets()
method from wherever you like. In my example I call it when the component is mounted.
mounted() {
this.findTickets();
},
Here's a working example: https://codesandbox.io/s/patient-wave-u8uk7