我如何使用 vue.js 使用 axios 将 API 数组显示为 bootstrap 卡片

Question

我还不太了解 Vue，但我正在尝试从我创建的 API 中获取我的产品的卡片展示。我设法通过使用 while 循环在 php 代码中显示所有内容，效果很好，但我想用 axios 和 vue 尝试一下。我的数组键在 html 代码中，但我认为我称它们为错误以及不理解创建 while 循环的逻辑。 ill post php 代码来展示我在这个 post 末尾尝试用 vue 和 axios 做什么。 app只是为了显示我的api在工作，app2是获取显示的代码。

 <!-- vue while loop of products from API in bootstrap cards -->
        <section>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <!-- vue while loop of info array -->
                        <div id="app2" >
                            <div class="col-md-3">
                                <div class="card">
                                    <div class="card-body">
                                        <!-- while loop goes here, i think -->
                                        <div class="product" v-while='info2 in data'>
                                            <img src={{productID.productImage}} alt="">
                                            <h4 class="text-info">{{productID.productName}}</h4>                                            
                                            <h4 class="text-muted">{{productID.price}} Coins</h4>
                                            <p class="text-muted">{{productID.productDescription}}</p>
                                            <input type="number" name="quantity" class="form-control" value="1">
                                            <input type="hidden" name="productName" value="{{productID}}">
                                            <input type="hidden" name="price" value="{{productID.price}}">
                                            <input type="submit" name="add_to_cart" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" value="Add to Cart">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- temporarily display json data, this is showing an array from my API -->
        <div id="app">
            {{ info }}
        </div>

        <!-- vue code for product display  -->
        <script>
            var app2 = new Vue({
                el: '#app2',
                data: {
                    info2: '',
                },
                methods: {
                    getInfo2: function () {
                        axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
                        .then(function (response) {
                            app2.info2 = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    }
                },
                mounted: function () {
                    this.getInfo2();
                }
            });
            </script>


        <!-- vue code to temporarily display jsan data -->
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    info: '',
                },
                methods: {
                    getInfo: function () {
                        axios.get('http://localhost:8888/DevsDev2022/productAPI/products')
                        .then(function (response) {
                            app.info = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    }
                },
                mounted: function () {
                    this.getInfo();
                }
            });
            </script>

PHP code that works

<section>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <?php
                            $query = 'SELECT * FROM products ORDER BY productID ASC';
                            $result = mysqli_query($conn,$query);
                            if(mysqli_num_rows($result) > 0){
                                while($row = mysqli_fetch_assoc($result)){
                                    echo '
                                    <div class="col-md-3">
                                        <div class="card">
                                            <div class="card-body">
                                                <form method="post" action="index.php?action=add&id='.$row['productID'].'">
                                                    <div class="product">
                                                        <img src="'.$row['productImage'].'" alt="">
                                                        <h4 class="text-info">'.$row['productName'].'</h4>                                            
                                                        <h4 class="text-muted">'.$row['price'].' Coins</h4>
                                                        <p class="text-muted">'.$row['productDescription'].'</p>
                                                        <input type="number" name="quantity" class="form-control" value="1">
                                                        <input type="hidden" name="productName" value="'.$row['productID'].'">
                                                        <input type="hidden" name="price" value="'.$row['price'].'">
                                                        <input type="submit" name="add_to_cart" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" value="Add to Cart">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    ';
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
        </section>

Answer 1

应该是这样的。没有 v-while 这样的指令。如果你想渲染一个列表，你可以使用 v-for

<div id="app2" >
  <div class="col-md-3">
    <div class="card">
      <div class="card-body">
        <!-- while loop goes here, i think -->
        <div class="product" v-for="product in info2" :key="product.id">
          <img :src="product.productImage" alt="">
          <h4 class="text-info">{{ product.productName }}</h4>                                            
          <h4 class="text-muted">{{ product.price }} Coins</h4>
          <p class="text-muted">{{ product.productDescription }}</p>
          <input type="number" name="quantity" class="form-control" value="1">
          <input type="hidden" name="productName" value="product.productName">
          <input type="hidden" name="price" value="product.price">
          <input type="submit" name="add_to_cart" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" value="Add to Cart">
        </div>
      </div>
    </div>
  </div>
</div>

我如何使用 vue.js 使用 axios 将 API 数组显示为 bootstrap 卡片

how do i use vue.js to display API array as bootstrap cards using axios

html

javascript

api

vue.js

axios