javascriptvue.jsvuejs2v-forvue-filter

How to display a text for non-filtered elements


I am trying to create a calendar like in the below: enter image description here

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?


Solution

  • 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