在循环外访问 v-for 动态创建的元素

Question

我有一个 v-for 循环，我想在循环外访问动态创建的项目。可能吗？

    <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"
          }
        ]
      }
   }

Answer 1

您需要获得家长的访问权限。您可以将 v-for 放在模板标签上，然后在那里进行迭代。

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

这允许您访问每个项目。参见：Templates and v-for

Answer 2

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

那是数据操作，不是DOM操作。您不会从 DOM 获取数据。它在您的视图模型中。如您所想（并在您的评论中指出），您可以制作 computed.

在循环外访问 v-for 动态创建的元素

Accessing v-for dynamically created elements outside of loop

javascript

vue.js

v-for