如何迭代NUXT中的对象集合（数组）？

发布于 2025-02-09 17:30:35 字数 949 浏览 1 评论 0原文

我正在构建一个小项目，其中有一个组件，我应该从API中渲染数据。

这是我的代码：

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li
          v-for="(product, key) of product"
          :key="product.id"
          :img="product.img"
        >
          {{ product.description }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
export default {
  async fetch() {
    this.products = await this.$axios("https://dummyjson.com/products");
  },
};
</script>

这是错误代码：

属性或方法“产品”不是在实例上定义的，而是在渲染过程中引用的。通过初始化属性
，请确保此属性在数据选项或基于类的组件中具有反应性。

原文

I'm building a small project where it has a component in it, I should render the data from the API.

Here is my code:

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li
          v-for="(product, key) of product"
          :key="product.id"
          :img="product.img"
        >
          {{ product.description }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
export default {
  async fetch() {
    this.products = await this.$axios("https://dummyjson.com/products");
  },
};
</script>

and here is the error code:

Property or method "product" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谈场末日恋爱 2025-02-16 17:30:35

这项工作

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li v-for="product in products" :key="product.id" :img="product.img">
          {{ product.description }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  async fetch() {
    const response = await this.$axios.$get('https://dummyjson.com/products')
    this.products = response.products
  },
}
</script>

您需要v-for =“产品中的产品”如下所述： https://vuejs.org/guide/essentials/list.html

此外，关于网络请求

我们可以像往常一样看到，实际数据在data ，因此您可以使用$ get快捷方式： https://axios.nuxtjs.org/usage#-shortcuts

然后，您需要访问products字段才能将数据进行迭代。使用Vue DevTools +网络选项卡极大地有助于调试该选项卡！

This works

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li v-for="product in products" :key="product.id" :img="product.img">
          {{ product.description }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  async fetch() {
    const response = await this.$axios.$get('https://dummyjson.com/products')
    this.products = response.products
  },
}
</script>

You need v-for="product in products" as explained here: https://vuejs.org/guide/essentials/list.html

Also, regarding the the network request

We can see that as usual, the actual data is inside data, hence you can use the $get shortcut: https://axios.nuxtjs.org/usage#-shortcuts

Then you need to access the products field to have the data to iterate on. Using the Vue devtools + network tab greatly helps debugging that one!

回复收藏 0 原文

抠脚大汉 2025-02-16 17:30:35

所以答案是我错过了@kissu上面提到的数据

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.description }}
          {{ product.images }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  async fetch() {
    const response = await this.$axios.$get("https://dummyjson.com/products");
    this.products = response.products;
  },
};
</script>

so the answer is i missed putting the data as @kissu has mentioned above

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching products...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt products</h1>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.description }}
          {{ product.images }}
        </li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: [],
    };
  },
  async fetch() {
    const response = await this.$axios.$get("https://dummyjson.com/products");
    this.products = response.products;
  },
};
</script>

回复收藏 0 原文

~没有更多了~