v-loop 解决方法中的计算属性答案

【问题标题】：Computed property in a v-loop workaroundv-loop 解决方法中的计算属性
【发布时间】：2020-08-31 05:41:21
【问题描述】：

知道计算属性不能带参数，我正在尝试使下面的代码工作。你有什么主意吗？我正在探索在函数上使用观察者，但我想知道是否没有更简单的解决方案。

var app = new Vue({
    el: '#app',
    data() {
      return {
        sessions: {
          "156": {
            tickets: {
              "01": {
                available: true,
              },
              "02": {
                available: false,
              },
            }
          },
        },
        tickets: {
          "01": {
            attr: "somestring",
          },
          "02": {
            attr: "someotherstring",
          },
        },
      },
    };
  },
  computed: {
    sessionTickets(session) {
        let _this = this;
        let sessionTickets = {};
        $.each(_this.session.tickets, function(ticketId, sessionTicket) {
            if(sessionTicket.available) {
                sessionTickets[ticketId] = _this.tickets[ticketId];
            }
        });
        return sessionTickets;
    },
  },
});

<div v-for="session in sessions">
  <div v-for="sessionTicket in sessionTickets(session)">
    {{ sessionTicket.attr }}
  </div>
</div>

【问题讨论】：

标签： javascript vue.js computed-properties

【解决方案1】：

感谢“WallOp”让我意识到我的计算属性处于会话循环中，因此它通常可以成为类方法并在会话刷新时刷新！

【讨论】：

【解决方案2】：

我认为你可以使用计算属性。只需过滤会话票。像这样：

var app = new Vue({
  el: '#app',
  data() {
    return {
      sessions: {
        "156": {
          tickets: {
            "01": {
              available: true,
            },
            "02": {
              available: false,
            },
          }
        },
      },
      tickets: {
        "01": {
          attr: "somestring",
        },
        "02": {
          attr: "someotherstring",
        },
      },
    },
  };
  computed: {
    filteredSessions() {
      return this.sessions.map( session => {
        let tickets = {};
        for(key in session.tickets) {
          if(session.tickets[key].available && this.tickets.hasOwnProperty(key)) {
            tickets[key] = this.tickets[key];
          }
        }
        session.tickets = tickets;

        return session;
      });
    },
  },
});

<div v-for="session in filteredSessions">
  <div v-for="ticket in session.tickets">
    {{ ticket.attr }}
  </div>
</div>

【讨论】：