更新时间:2023-12-05 17:33:16
好吧,我终于想通了这个问题.我所做的只是在我的 main.js
文件中调用同步 ajax 请求,在该文件中我的根 vue 实例被实例化,并为请求的数据分配一个数据属性:
main.js
let acfData;$.ajax({异步:假,url: 'http://localhost/placeholder/wp-json/acf/v2/page/2',类型:'获取',成功:功能(响应){控制台日志(响应.acf);acfData = response.acf;}.绑定(这个)})const 路由器 = 新的 VueRouter({路线: [{路径:'/',组件:首页},{路径:'/about',组件:关于},{ 路径:'/票',组件:票},{路径:'/赞助商',组件:赞助商},],哈希爆炸:假});export.router = 路由器;const app = new Vue({路由器,数据: {acfs:acfData},创建(){}}).$mount('#app')
从这里开始,我可以像这样使用每个 .vue
文件/组件中提取的数据:
出口默认{名称:'应用',数据 () {返回 {acf: this.$parent.acfs,}},
最后,我在同一个 .vue
模板中使用以下内容渲染数据:
<过渡名称=家"v-on:输入=输入"v-on:leave="离开"v-bind:css="false"模式=输入"><div class="full-height-container background-image home" v-bind:style="{backgroundImage: 'url(' + this.acf.home_background_image.url + ')'}"><div class="content-container"><h1 class="white bold home-title">{{ acf.home_title }}</h1><h2 class="white home-subtitle">{{ acf.home_subtitle }}</h2><div class="button-block"><a href="#/about"><button class="white home-button-1">{{ acf.link_title_1 }}</button></a><a href="#/tickets"><button class="white home-button-2">{{ acf.link_title_2 }}</button></a>