VueJS Router-View and Axios

Question

VueJS Router-View and Axios

Navigation

#1 by (5 votes)
#2 by (1 votes)

3

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

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

Solution I'd like : When I clicked there on the menu in the item " Stores ", I wanted the current view (in the case " Stores ") reloaded for Axios to get Get back and the Table to bring the current data.

@EDIT

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

Thank you!

javascript vue.js vuetable

asked by anonymous 21.09.2017 / 22:02

2 answers

1

You do not need to reload 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 there 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>

21.09.2017 / 22:12

How to split elements from an array using the For loop? When to use String and StringBuilder [duplicate]

score 5 · Accepted Answer

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

These hooks / pre-defined hooks such as beforeRouteEnter are called before the route is re-weighted, and in this case a callback function next is called when the component has been instantiated and is available within that function. At this point you can call the methods of the function.

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: link

If you want to force the update of the component while already in the view of this 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 on the menu to a component that calls the method.

This last idea would look like this: link