“属性或方法“产品”未在实例上定义，但在渲染期间引用“Vue App 中的错误

Question

我在我的 localhost REST 端点有一个产品 JSON 数组，我想在我的 Vue 应用程序中显示它导致 axios。我在“数据”中定义了一个空数组以使其具有反应性，但我不断收到“产品”未在实例上定义“错误， 截屏： 我的 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>

我的 App.vue 文件：

<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>

我的 main.js 文件：

import Vue from 'vue'
import App from './App.vue'


Vue.config.productionTip = false
Vue.component('products', require('./components/Products.vue'));
new Vue({
  render: h => h(App),
  data: {
      products: []
    }
  }).$mount('#app')

Answer 1

由于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>