我有2个组件
组件1,名称为SearchResultVue.vue组件
组件是这样的:
<template>
...
<span class="pull-right" v-show="totalall>8">
<pagination :data="list" :baseUrl="this.Laravel.baseUrl" :total="totalPage" :nextPage="nextPage" :prevPage="prevPage"></pagination>
</span>
...
</template>
组件调用组件2.名称为Pagination.vue组件
Pagination组件是这样的:
<template>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a :href="prevPage" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="i in total">
<a :href="baseUrl+'/search-result?page='+i">{{i}}</a>
</li>
<li>
<a :href="nextPage" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script>
export default{
props:['total', 'data', 'nextPage', 'prevPage'],
computed:{
baseUrl(){
return window.Laravel.baseUrl
}
}
}
</script>
执行时,在控制台中存在2个错误
错误1是这样的:
[Vue警告]:属性或方法“Laravel”未定义 实例,但在渲染期间引用。确保声明被动 数据选项中的数据属性。
错误2是这样的:
未捕获的TypeError:无法读取未定义的属性“baseUrl”
如何解决错误?
答案 0 :(得分:5)
您需要将其附加到window
。我认为混乱是因为Laravel通过csrf_token
提供了Laravel.csrfToken
,但为了做到这一点,它将以下内容放在header
中:
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
就个人而言,我不喜欢将php
与javascript
混合,但如果您真的想将baseurl
添加到全局Laravel
对象中,那么您可以这么做:
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
'baseUrl' => base_url()
]); ?>
这是JSFiddle:https://jsfiddle.net/w6szt02q/
答案 1 :(得分:3)
在webpack配置中设置env变量。
module.exports = {
NODE_ENV: '"production"',
BASE_URL: '"http://myshop.ct-staging.tk'",
}
// config/dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_URL: '"http://myshop.dev/"' // this overrides the BASE_URL value of prod.env
})
在您的Vue应用中使用它。
Vue.config.baseurl = process.env.BASE_URL