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 >
                <div >
                    <div >
                        <!-- vue while loop of info array -->
                        <div id="app2" >
                            <div >
                                <div >
                                    <div >
                                        <!-- while loop goes here, i think -->
                                        <div  v-while='info2 in data'>
                                            <img src={{productID.productImage}} alt="">
                                            <h4 >{{productID.productName}}</h4>                                            
                                            <h4 >{{productID.price}} Coins</h4>
                                            <p >{{productID.productDescription}}</p>
                                            <input type="number" name="quantity"  value="1">
                                            <input type="hidden" name="productName" value="{{productID}}">
                                            <input type="hidden" name="price" value="{{productID.price}}">
                                            <input type="submit" name="add_to_cart"  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 >
                <div >
                    <div >
                        <?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 >
                                        <div >
                                            <div >
                                                <form method="post" action="index.php?action=add&id='.$row['productID'].'">
                                                    <div >
                                                        <img src="'.$row['productImage'].'" alt="">
                                                        <h4 >'.$row['productName'].'</h4>                                            
                                                        <h4 >'.$row['price'].' Coins</h4>
                                                        <p >'.$row['productDescription'].'</p>
                                                        <input type="number" name="quantity"  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"  value="Add to Cart">
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    ';
                                }
                            }
                        ?>
                    </div>
                </div>
            </div>
        </section>

CodePudding user response：

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 >
    <div >
      <div >
        <!-- while loop goes here, i think -->
        <div  v-for="product in info2" :key="product.id">
          <img :src="product.productImage" alt="">
          <h4 >{{ product.productName }}</h4>                                            
          <h4 >{{ product.price }} Coins</h4>
          <p >{{ product.productDescription }}</p>
          <input type="number" name="quantity"  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"  value="Add to Cart">
        </div>
      </div>
    </div>
  </div>
</div>