My question relates to having 2 specific components:
Firstly, there is a component called SearchResultVue.vue.
The structure of this component is as follows :
<template>
...
<span class="pull-right" v-show="totalall>8">
<pagination :data="list" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
</span>
...
</template>
This component also calls upon another component, Pagination.vue.
The Pagination component looks like this :
<template>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a :href="prevPage" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="i in total">
<a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
</li>
<li>
<a :href="nextPage" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default{
props:['total', 'data', 'nextPage', 'prevPage'],
computed:{
baseUrl(){
return window.Laravel.baseUrl
}
}
}
</script>
When I interact with the pagination by clicking on page numbers or next/prev buttons, the browser displays JSON data instead of HTML:
{"total":20,"per_page":8,"current_page":2,"last_page":3,"next_page_url":"http://chelseashop.dev/search-result?page=3","prev_page_url":"http://chelseashop.dev/search-result?page=1","from":9,"to":16,"data":[{"id":20,"name":"Bunga Hadiah","photo":"bunga7.jpg","price":1275523,"stock":68,"total_sold":25,"total_view":0,"weight":90,"store_id":9,"shop_name":"Sari Florist","formatted_address":"Jakarta"},{"id":3,"name":"Papan Bunga Wedding","photo":"bunga5.jpg","price":1988886,"stock":77,"total_sold":96,"total_view":0,"weight":40,"store_id":1,"shop_name":"Bunga Airi","formatted_address":"Kemang"}]}
I'm wondering why it's not displaying in the form of HTML as expected?