我无法用vue.js显示json

Question

我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。

我正在尝试显示产品数组中的 json 数据，但它不起作用。

Vue.js

<div class="box" v-for="product in products" :key="product.id">
  <h2>Produto {{ product.name }}</h2>
  <h3>Situação {{ product.situation }}</h3>
</div>

export default {
  data() {
    return {
      products: [],
    };
  },
  methods: {
    async getData() {
      try {
        const req = await fetch("http://localhost:3000/products");
        const data = await req.json();
        this.products = data.products;
        console.log("data" + data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    },
    mounted() {
      this.getData();
    },
  },
};

JSON：

{
  "products": [
    {
      "id": "a898",
      "name": "Claudio Romano",
      "situation": "Ativo"
    }
  ]
}

Answer 1

您问错了问题，因为该问题与 JSON 无关。如果您对此进行调试，您会注意到 console.logs 不执行，这意味着问题更为根本，因为该方法本身并未实际运行。

根本问题是

mounted()

不应该在

methods

内部。您正在使用 Vue 的选项 API，其中

data()

、

methods

和

mounted

都是独立的、单独的“选项”。您需要将安装移动到方法之外，它应该是一个“兄弟”选项。

export default {
  data() {
    ...
  },
  methods: {
    ...
  },
  mounted() {
    this.getData();
  },
};

游乐场演示