javascript - 在循环外访问 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

我想访问所有项目，以便显示所有项目的数量。

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

Answer 2

您需要从父母那里获得访问权限。您可以将 v-for 放在模板标签上，并在那里进行迭代。

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

这允许您访问每个项目。请参阅：模板和 v-for