Eu tenho uma página com 2 estruturas usando router-view. Menu e Content. o no meu Menu eu tenho uma página chamada "Lojas", nessa página "Lojas" possui uma tabela, eu dou um Axios.Get na minha API e ela me retornar um JSON que joga pra tabela de "Lojas".
Problema: Se minha API tem um dado novo, eu tenho que recarregar a view.
Solução que gostaria: Quando eu clicar lá no menu no item "Lojas", eu queria que a view atual (no caso "Lojas") recarregasse para que o Axios desse o Get de novo e a Tabela trouxesse os dados atuais.
@EDIT
Lojas.vue
<template>
<table class="table table-bordered table-striped dataTable" id="dataTable" width="100%">
<tbody class="animated fadeIn">
<tr v-for="item in dataItem" v-bind:key="item.Id">
<td class="text-left">{{item.Name}}</td>
</tr>
</tbody>
</table>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
dataItem: [],
errors: []
}),
created() {
axios.get(`http://localhost:8090/API/Lojas`)
.then(response => {
this.dataItem = response.data.Data
}).then(() => {
$('#dataTable').DataTable( datatableConfigBR )
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Menu.vue
<ul class="nav nav-second-level collapse">
<li>
<router-link :to="{ name: 'lojas' }">Lojas</router-link>
</li>
</ul>
routes.js
import lojas from './Lojas.vue'
const routes = [{
path: '/Content',
component: Content,
children: [
{
name: "lojas",
path: '/Lojas',
component: lojas
}
]
}
]
Obrigado!