javascript - How to pass props to all routes in vue.js? -
i want pass base_url
components. app.js like:
<template> <router-view></router-view> </template> <script> import addjoke './components/addjoke.vue' import showjokesall './components/showjokesall.vue' export default { components: { 'add-joke': addjoke, 'show-jokes-all': showjokesall }, data () { return { base_url : 'http://127.0.0.1:8090' } } } </script> <style> </style>
and routes.js
:
import showjokesall './components/showjokesall.vue'; import addjoke './components/addjoke.vue'; export default [ {path:'/', component: showjokesall, props: {base_url: 'http://127.0.0.1:8090'} }, {path:'/add', component: addjoke, props: {base_url: 'http://127.0.0.1:8090'} } ]
and in showjokesall
component have:
<script> import axios 'axios'; export default { name: 'showjokesall', props: ['base_url'], data () { return { jokes:[] } }, methods: { }, created() { axios.get( base_url + '/api/jokes').then( response => this.jokes = response.data); } } </script>
but components not received base_url
.
[vue warn]: error in created hook: "referenceerror: base_url not defined"
how can fix this?
to access prop define props: ['base_url'], use this.base_url
:
axios.get( this.base_url + '/api/jokes').then(/*...*/)
Comments
Post a Comment