Cannot display data from an API using v-for in vuejs - api

Question

I cannot get or display data from an API but the API is working fine and when I click the button, the data appears,
I want it to appear automatically
I'm using Axios method to connect to my API
I'm new to Vue.js and this is my simple code
var Ve = new Vue({
el: "#app",
data: {
products: [],
},
methods: {
getData: function(){
axios.get('http://localhost:8000/api/products')
.then(data => this.products = data.data)
.catch(err => console.log(err));
}
},
})
THIS IS WHERE I WANT TO DISPLAY MY DATA
<div class="col-sm-9 padding-right" id="app" >
<div class="features_items"><!--features_items-->
<h2 class="title text-center">المنتجات</h2>
<div class="col-sm-4" v-for="item in products">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images/products/2.jpeg" alt="" />
<h2>${{ item.price }}</h2>
<p>{{ item.name }}</p>
<i class="fa fa-shopping-cart"></i>أضف إلى السلة
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>${{ item.price }}</h2>
<p>{{ item.name }}</p>
<i class="fa fa-shopping-cart"></i>أضف إلى السلة
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>أضف إلى المفضلة</li>
</ul>
</div>
</div>
</div>
</div><!--features_items-->
<button type="button" #click="getData()">show</button>
</div>

Answer 1

I want it to appear automatically I'm using Axios method to connect to my API
As per my understanding, You want to bind the API data on component load. If Yes, You can call getData() method in the mounted() life cycle hook.
mounted hook used to run code after the component has finished the initial rendering and created the DOM nodes.
Demo :
var vm = new Vue({
el:"#app",
data: {
products: [],
},
mounted() {
this.getData();
},
methods: {
getData() {
// Here make an API call and bind the response in products.
this.products = [{
name: 'product1',
price: 50
}, {
name: 'product2',
price: 100
}, {
name: 'product3',
price: 150
}, {
name: 'product4',
price: 200
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, index) in products" :key="index">{{ item.name }} - {{ item.price }}</li>
</ul>
</div>