Блог

Главная - Вопросы по программированию - Как отобразить текст для нефильтрованных элементов

Как отобразить текст для нефильтрованных элементов

#javascript #vue.js #filter #v-for #vue-filter

Вопрос:

Я пытаюсь создать календарь, как показано ниже: введите описание изображения здесь

Как вы видите, у меня есть объект «Билеты», и в соответствии с датой этих билетов я их показываю. Что мне нужно сделать, как вы видите на картинке, я хочу отобразить текст «Нет доступного билета», когда он пуст. Например, для понедельника и вторника (фактически все дни, кроме среды). Поэтому, чтобы взять билет, я фильтрую билеты:

 findTickets(tickets, date) {
            return tickets.filter((ticket) => {
                return (
                    ticket.date.getDate() === date.getDate() amp;amp;
                    ticket.date.getMonth() === date.getMonth() amp;amp;
                    ticket.date.getFullYear() === date.getFullYear() amp;amp;
                    this.getWeekNumber(ticket.date) === this.currentWeekNumber
                );
            });
        },

И в основном отображается внутри таблицы с v-для:

 <tr class="list-content" v-for="ticket in findTickets(tickets, date)">
                <td>{{ ticket.time }}</td>
                <td>{{ ticket.date }}</td>
                <td>{{ ticket.name }}</td>
            </tr>

Итак, вы знаете, как я могу написать «нет доступной даты», когда билет пуст?

Комментарии:

1. Можете ли вы предоставить более подробную информацию? Когда билет «пустой»? Вы хотите проверить, является ли дата нулевой?

2. Да, когда дата равна нулю, по-видимому, нет билета для фильтрации. Поэтому я хочу показать текст, когда div пуст

Ответ №1:

Вместо прямого вызова findTickets() в HTML вы можете вызвать findTickets() код Javascript и использовать список непосредственно в v-for цикле. Вы можете v-if проверить tickets , пуст ли массив, и если да, то распечатать сообщение.

 <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>

Это данные:

  data: function () {
    return {
      tickets: [],
    };
  },

В этом примере findTickets() метод должен возвращать пустой массив, если нет билетов.

 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 = [];
      }
    },
  }

И тогда вам нужно только вызвать findTickets() метод из любого места, где вам нравится. В моем примере я вызываю его, когда компонент монтируется.

  mounted() {
    this.findTickets();
  },

Вот рабочий пример:
https://codesandbox.io/s/patient-wave-u8uk7

Ответ №2:

Вы можете попробовать использовать карту вместо фильтра, что-то вроде этого:

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

Возможно, лучший способ-создать вычисляемое свойство…

Метки: