如何为未过滤的元素显示文本

Question

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?

Answer 1

You can try with map instead of filter, something like this:

return tickets.map((ticket) => {
  if (ticket.date.getDate() === date.getDate() &&
      ticket.date.getMonth() === date.getMonth() &&
      ticket.date.getFullYear() === date.getFullYear() &&
      this.getWeekNumber(ticket.date) === this.currentWeekNumber) return ticket;
  ticket = {time: '', date: 'No available ticket', name: ''}
  return ticket
});

Maybe better way is to create computed property...

Answer 2

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