CODEWITHSUNDEEP
node.jsrestvue.jsaxios
Abhishek
Abhishek

Reputation: 380

"Property or method "products" is not defined on the instance but referenced during render" Error in Vue App

I have a products JSON array at my localhost REST endpoint that I want to display in my Vue App causing axios. I have defined an empty array inside "data" to make it reactive, but I keep getting the "products" is not defined on the instance" error, Screenshot: enter image description here My Products.vue file:

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

My App.vue file:

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

My main.js file:

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

Upvotes: 0

Views: 293

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Since products are defined and fetched inside Products.vue component there's no need to pass them as prop, so App.vue should look like :

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

Upvotes: 1

Related Questions