Vuejs Router-View and Axios

Question

I have a page with 2 structures using router-view. Menu and Content. the in my Menu I have a page called "Shops", on that page "Shops" has a table, I give a Axios.Get in my API and it returns me a JSON that plays to the table "Shops".

Problem: If my API has a new datum, I have to reload the view.

Solution that I would like: When I click there on the menu in the item "Shops", i wanted the current view (in case "Shops") reload for Axios to give the Get again and the Table to bring the current data.

@EDIT

Shops.

<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.

<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
            }
        ]
    }
]

Thank you!

Answer 1

Usa one of the methods that the vue-router implements in the component, the beforeRouteEnter.

Those hooks/ pre-defined hooks such as the beforeRouteEnter are called before the route is redecorated, and in this case pass a function to callback next this function is called when the component has been instantiated and is available within that function.
At that moment you can call the function methods.

Example:

import axios from 'axios'
export default {
  data: () => ({
    dataItem: [],
    errors: []
  }),
  methods: {
    atualizarLoja() {
      axios.get(`http://localhost:8090/API/Lojas`)
        .then(response => {
          this.dataItem = response.data.Data
          $('#dataTable').DataTable(datatableConfigBR)
        })
        .catch(e => {
          this.errors.push(e)
        })
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.atualizarLoja())
  }
}

jsFiddle: http://jsfiddle.net/Sergio_fiddle/Ly4eaeyq/

If you want to force the update of the component while already in the view of that component the router does not help you. If there is no navigation the router does nothing.

In this case the best possibility is to create an update button, or change the click button in the menu for a component that calls the method.

That last idea would be like this: http://jsfiddle.net/Sergio_fiddle/Ly4eaeyq/1/

Answer 2

You don’t need to reload the view, just have a method and call it whenever you click, or even reload it in x minutes. Ex:

<script>
   export default{
      data(){
         return{
            dados: []
         }
      },
      methods: {
         api(){
            axios.get('URL')
            .then(response => {
                this.dados = response.data
            })
            .catch(error => {
                console.log('ERRO')
            })
         }
      }

   }
</script>

and ai on a link <button @click="api">Atualizar</button>

Or even in X time

<script>
   export default{
      data(){
         return{
            dados: []
         }
      },
      created(){
          this.api()
      },
      methods: {
         api(){
            setInterval(function(){
            axios.get('URL')
            .then(response => {
                this.dados = response.data
            })
            .catch(error => {
                console.log('ERRO')
            })
            }, 1000)
         }
      }

   }
</script>