如何显示非过滤元素的文本

Question

我正在尝试创建如下所示的日历：

如您所见，我有门票对象，根据这些门票的日期，我正在显示它们。我需要做什么，正如你在图片中看到的那样，我想在它为空时显示文本 'No available ticket' 。例如，对于星期一和星期二（实际上是除星期三之外的所有天）。所以要取票，我在过滤票：

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
                );
            });
        },

并且基本上用 v-for:

在 table 内显示

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

那你知道空票时怎么写'no available date'吗？

Answer 1

您可以尝试使用地图而不是过滤器，如下所示：

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
});

也许更好的方法是创建计算属性...

Answer 2

您可以在 Javascript 代码中调用 findTickets() 并在 v-for 循环中直接使用列表，而不是直接在 HTML 中调用 findTickets() .您可以使用 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() 方法应该 return 一个空数组。

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.

时调用它

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

这是一个工作示例： https://codesandbox.io/s/patient-wave-u8uk7

如何显示非过滤元素的文本

How to display a text for non-filtered elements

javascript

vue.js

vuejs2

v-for

vue-filter