Почему ссылки на постраничные ссылки возвращают json при нажатии? (Vue.js 2)

Question

У меня 2 компонент

Компонент 1, Имя является SearchResultVue.vue компонент

Компонент, как это:

<template> 
    ... 
     <span class="pull-right" v-show="totalall>8"> 
      <pagination :data="list" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination> 
     </span> 
    ... 
</template> 

Компонент вызова компонента 2. имя Pagination.vue компонент

компонент Разбивка выглядит так:

<template> 
    <nav aria-label="Page navigation"> 
     <ul class="pagination"> 
      <li> 
       <a :href="prevPage" aria-label="Previous"> 
        <span aria-hidden="true">&laquo;</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">&raquo;</span> 
       </a> 
      </li> 
     </ul> 
    </nav> 
</template> 
<script> 
    export default{ 
     props:['total', 'data', 'nextPage', 'prevPage'], 
     computed:{ 
      baseUrl(){ 
       return window.Laravel.baseUrl 
      } 
     } 
    } 
</script> 

Когда я нажимаю странице 1 или 2, или на следующей странице и т.д., по данным экрана браузера JSon как это:

{ "всего": 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, «сток»: 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 , "вес": 40, "store_id": 1, "shop_name": "Бунг Айри», "formatted_address": "Кеманг"}]}

Почему не отображается в виде HTML?

Answer 1

Использование :href на <a> не использует реактивные функции Vue.js.

Возможно, вам стоит прочитать (или прочитать еще раз) Vue.js guide introduction, в частности раздел Handling User Input.

Вы должны будете использовать клиент HTTP как Axios или vue-resource внутри метода (назовем его fetchData) в компоненте, который будет совершать свой магазин Vuex.

Вы можете позвонить этому методу через v-on:click="fetchData". Как только ваш шаблон использует ваши реактивные данные (с помощью v-for, например, чтобы просмотреть ваши результаты поиска), ваш HTML будет обновлен Vue.js.