我如何使用 vue.js 将 API 阵列显示为使用 axios 的引导卡

Question

I Dont really understand Vue that well yet but i am trying to get a card display of my products from my API i created. i managed to display everything in php code by using a while loop and that worked great but i want to try it with axios and vue. my array keys are in the html code but i think i am calling them wrong aswell as not understanding the logic to create a while loop. ill post the php code to show what i am trying to do with vue and axios at the end of this post. app is just to show that my api is working, app2 is the code to get the display.

 <!-- 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

it should be something like this. There's no such a directive as v-while . You use v-for if you wanna render a list

<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>