无法在 vuejs 中使用 v-for 显示来自 API 的数据

Question

我无法从 API 获取或显示数据，但 API 工作正常，当我单击按钮时，数据出现，我想让它自动出现我正在使用 Axios 方法连接到我的 API

我是 Vue.js 的新手，这是我的简单代码

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));
            }
        },
    })

这是我要显示我的数据的地方

                <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>
                                        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>أضف إلى السلة</a>
                                    </div>
                                    <div class="product-overlay">
                                        <div class="overlay-content">
                                            <h2>${{ item.price }}</h2>
                                            <p>{{ item.name }}</p>
                                            <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>أضف إلى السلة</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="choose">
                                    <ul class="nav nav-pills nav-justified">
                                        <li><a href="#"><i class="fa fa-plus-square"></i>أضف إلى المفضلة</a></li>
                                    </ul>
                                </div>
                                
                            </div>
                        </div>                      
                    </div><!--features_items-->                             
                    <button type="button" @click="getData()">show</button>
                </div>

Answer 1

我希望它自动出现我正在使用 Axios 方法连接到我的 API

据我了解，您想在组件加载时绑定 API 数据。如果是，您可以在 mounted() 生命周期挂钩中调用 getData() 方法。

mounted 挂钩用于在组件完成初始渲染并创建 DOM 节点后运行代码。

演示 :

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>

无法在 vuejs 中使用 v-for 显示来自 API 的数据

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

api

vue.js

vuejs2