A solution for accessing computed properties within a v-for loop

Question

A solution for accessing computed properties within a v-for loop

Currently, I am facing a challenge with the code provided below. It seems that computed properties do not support parameters. Do you happen to have any suggestions on how to overcome this issue? I am considering using watchers on functions but I am also exploring if there is a simpler solution available.

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

Answer 1

Answer №1

Big shoutout to "WallOp" for helping me see that my computed property was stuck in a sessions loop, leading me to convert it into a class method that can now be easily refreshed upon session refresh!

Answer 2

Big shoutout to "WallOp" for helping me see that my computed property was stuck in a sessions loop, leading me to convert it into a class method that can now be easily refreshed upon session refresh!

Answer 3

Answer №2

One solution could be utilizing computed properties in Vue. In this case, you can filter tickets of sessions as shown below:

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>

Answer 4

One solution could be utilizing computed properties in Vue. In this case, you can filter tickets of sessions as shown below:

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>

A solution for accessing computed properties within a v-for loop

Answer №1

Answer №2

Similar questions

Unable to locate an element on the webpage due to a JavaScript-based error, which then becomes hidden after a few seconds. (Registration form)

Retrieve elements from an array based on the value of an object

What is the best way to pass the setState value to the useEffect hook?

Traverse Through Collection of Vue Elements

Can a library be developed that works with both Java and JavaScript/TypeScript?

Generate a sequence of years without relying on the range function

Showcasing ranges from various input types on a single page

Ways to host static content in ExpressJS for specific directories and exclude others

Dealing with errors in a sequelize ORM query: Tips and tricks

Page reloads are disabled when Chrome devtools debugger is paused in a React app

What is the process for cancelling an interval when it is disabled in my configuration file?

What could be causing this empty Ajax ResponseText?

Creating a service in AngularJS 1.8 with ES6 modules that acts as a bridge to a class based API interface

What is the best way to configure Jenkins to exclude or include specific component.spec.ts files from being executed during the build

Ensure all fields are valid prior to performing an update

The functionality of Vue.js routes is disrupted when employing the router-link component

Verifying input for Numeric TextField

encountering difficulties with installing dependencies using yarn or npm

Adjust Div Width using a button press

Finding the absolute root path of a npm package in Node.js