Search code examples
javascriptvue.jsv-for

Accessing v-for dynamically created elements outside of loop


I've got a v-for loop and I would like to access the dynamically created item outside of loop. Is it possible?

    <li v-for="item in cart.items">
      <h1>{{ item.product.name }}</h1>
    </li>
    <p>{{ access item.product.name outside }}</p>

   data () {
      return {
        cart: {
          items: []
        },
        products: [
          {
            name: "name"
          },
          {
            name: "name2"
          }
        ]
      }
   }

Solution

  • I would like to access all the items so I can display the quantity of them all.

    That is a data operation, not a DOM operation. You don't get your data from the DOM. It is in your viewmodel. As you figured out (and noted in your comment), you can make a computed.