I have an API that retrieves the total sum from a column in MySQL and returns it as JSON data. My goal is to display this data using Vue JS.
$stmt = $db->prepare("SELECT ROUND(SUM(total_amount), 2) as TotalAmount FROM orders");
$result = $stmt->fetch(PDO::FETCH_ASSOC);
echo json_encode($result);
The JSON result is:
{
"TotalAmount": "2645.09"
}
To display this data, I am using Vue Js and passing it to a specific div element.
<div id="app" class="peer">
<span>{{ TotalAmount }}</span>
</div>
<script>
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api_url.php')
.then(response => (this.info = response))
}
})
</script>
Despite my efforts, I am unable to see the sum value displayed in my div. Additionally, the Vue developer tools are not functioning for me to check if the value is actually being retrieved. Should I consider a different approach for accessing the API?