Reputation: 380
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:
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
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