CODEWITHSUNDEEP
javascriptvue.jsvuejs2
mafortis
mafortis

Reputation: 7128

Pass value to all routes with router-view

I have data of currency and i wish to pass this data to all views instead of calling same function in each view.

So I've decided to call my function in App.vue (my main view) but can't figure it how to pass it along with router-view

Code

HTML

<template>
  <el-container :is="layout">
    <transition name="fade">
      <router-view id="content" :key="$route.fullPath"></router-view>
    </transition>
  </el-container>
</template>

Script

export default {
    data() {
      return {
        isCollapse: true,
        user: '',
        type: '',
        site_name: process.env.MIX_APP_NAME
      }
    },
    created () {
      this.getCurrency()
    },
    methods: {
      getCurrency() {
        axios
        .get('/api/currencyDefault')
        .then(response => {
          this.currency = response.data.data
        })
        .catch(function (error) {
          console.log('error', error);
        });
      },
    }
}

Any idea?

Upvotes: 0

Views: 901

Answers (2)

Qonvex620
Qonvex620

Reputation: 3972

You can pass that currency to the router view by doing it like this

    <template>
      <el-container :is="layout">
        <transition name="fade">
           <router-view :currency="currency"id="content" :key="$route.fullPath"></router-view>
        </transition>
      </el-container>
    </template>

export default {
    data() {
      return {
        isCollapse: true,
        user: '',
        type: '',
        site_name: process.env.MIX_APP_NAME
      }
    },
    created () {
      this.getCurrency()
    },
    methods: {
      getCurrency() {
        axios
        .get('/api/currencyDefault')
        .then(response => {
          this.currency = response.data.data
        })
        .catch(function (error) {
          console.log('error', error);
        });
      },
    }
}

now in your other view you could access it through props, like this

export default {
    props:['currency']
}

but the problem with this approach is like, when you have a deeper child component and you still want to access this currency data, then you have to pass again props to another router view which is sooner it will take you to having hard time in handling it. My suggest is to use Vuex for this. Since this currency is available to all of your views.

see docs here vuex

Upvotes: 2

jontetz
jontetz

Reputation: 86

You can pass down props to the router view and it will be passed along to the child component. This stackoverflow answers your question -> How to pass data to a router-view in Vue.js

<router-view :currency="currency"></router-view>

One issue I noticed, you set this.currency in your api call, which will overwrite the method you have called the same thing. Maybe change the name of your method to getCurrency.

methods: {
  getCurrency () {
    axios
    .get('/api/currencyDefault')
    .then(response => {
      this.currency = response.data.data
    })
    .catch(function (error) {
      console.log('error', error);
    });
  },
}

Upvotes: 1

Related Questions