我還不太了解 Vue，但我正在嘗試從我創建的 API 中獲取我的產品的卡片顯示。我設法通過使用while回圈在php代碼中顯示所有內容，效果很好，但我想用axios和vue試試。我的陣列鍵在 html 代碼中，但我認為我稱它們是錯誤的，也不理解創建 while 回圈的邏輯。生病發布 php 代碼以顯示我在這篇文章末尾嘗試使用 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 代碼
<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>
uj5u.com熱心網友回復：
它應該是這樣的。沒有像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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446455.html
標籤：javascript html api Vue.js axios
上一篇：NuxtJS和事件總線