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

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  id="app" >
                    <div ><!--features_items-->
                        <h2 >المنتجات</h2>
                        <div  v-for="item in products">
                            <div >
                                <div >
                                    <div >
                                        <img src="images/products/2.jpeg" alt="" />
                                        <h2>${{ item.price }}</h2>
                                        <p>{{ item.name }}</p>
                                        <a href="#" ><i ></i>أضف إلى السلة</a>
                                    </div>
                                    <div >
                                        <div >
                                            <h2>${{ item.price }}</h2>
                                            <p>{{ item.name }}</p>
                                            <a href="#" ><i ></i>أضف إلى السلة</a>
                                        </div>
                                    </div>
                                </div>
                                <div >
                                    <ul >
                                        <li><a href="#"><i ></i>أضف إلى المفضلة</a></li>
                                    </ul>
                                </div>
                                
                            </div>
                        </div>                      
                    </div><!--features_items-->                             
                    <button type="button" @click="getData()">show</button>
                </div>

CodePudding user response：

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>