Node.js &引用；属性或方法“；产品“；未在实例上定义，但在渲染期间引用；Vue应用程序中出现错误

我的localhost REST端点上有一个products JSON数组，我想在Vue应用程序中显示它。我在“data”中定义了一个空数组，使其成为反应式的，但我一直在获取实例“error”上未定义的“products”， 截图： My Products.vue文件：

<template>
  <div>
    <h1>Products</h1>
    <div class="card" v-bind:key="p.id" v-for="p in products">
      <div class="container">
        <h3>{{ p.name }}</h3>
        <p>Cost: {{ p.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      products: [],
    };
  },
  mounted() {
    axios
      .get("http://localhost:8080/products/all")
      .then((response) => {
        this.products = response.data.results;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};

</script>

<template>
  <div id="app">
        <h1>{{ msg }}</h1>
    <Products v-bind:products="products"/>
  </div>
</template>

<script>
import Products from './components/Products.vue';
export default {
  name: 'App',
  components: {
    Products
  },
  data(){
    return{
      msg: 'Check 123'
    }
  },
}
</script>

---

由于

products

是在

products.vue

组件中定义和获取的，因此无需将其作为道具传递，因此

App.vue

应该如下所示：

<template>
  <div id="app">
        <h1>{{ msg }}</h1>
    <Products />
  </div>
</template>

<script>
import Products from './components/Products.vue';
export default {
  name: 'App',
  components: {
    Products
  },
  data(){
    return{
      msg: 'Check 123'
    }
  },
}
</script>

{{msg}}
从“/components/Products.vue”导入产品；
导出默认值{
名称：“应用程序”，
组成部分：{
产品
},
数据（）{
返回{
消息：“检查123”
}
},
}

假设您使用的是Vue CLI和单文件组件（看起来像），除了回答中建议对App.Vue进行的更改之外，您还可以删除

Vue.component（…）

和

数据：{}

来自main.js。我已经做了您建议的更改，并且在回答中，错误不再出现。但是我的产品在检查时仍然是“未定义的”。解决了，谢谢！您是个救命恩人。谢谢！我做了更改，错误不再出现。但是，我的产品数组仍然没有填充。它仍然显示“未定义”“当我检查它的时候。当我到达端点时，它会给我数组。有什么想法吗？再次感谢.My products.vue://///export default{data（）{return{products:[]，}；}，mounted（）{this.getProducts（）；}，方法：{getProducts（）{axios.get（“）。然后（（response）=>{this.products=response.data.results；}）。catch（（错误）=>{console.log（error）；}；}，}，}，}，}；App.vue和你说的一模一样，main.js也没有变化。我认为你应该只做

this.products=response.data

？就是这样，你赢了。告诉我你的方法大师。我怎样才能像你一样好。我只是个初学者。

<template>
  <div id="app">
        <h1>{{ msg }}</h1>
    <Products />
  </div>
</template>

<script>
import Products from './components/Products.vue';
export default {
  name: 'App',
  components: {
    Products
  },
  data(){
    return{
      msg: 'Check 123'
    }
  },
}
</script>