根据wordpress页面模板NuxtJs更改布局

Question

bounty到期在2天内。这个问题的答案有资格获得+ 50声望赏金。Pirtpal Singh正在寻找来自信誉良好的来源的答案。

我想根据wordpress页面模板获取更改布局（我使用rest api获取数据）

API数据

{
  "id": 47, 
  "template": "test.php",    // need vue template according this 
}

export default { 
  validate ({ params }) {
    return !isNaN(+params.id)
  },
  async asyncData ({ params, error }) {
    return fetch('http://wordpress.local/wp-json/wp/v2/'+params.postType+'/'+params.id)
      .then(response => response.json())
      .then(res => {
          return { users: res } 
      })
  },
  layout () { 
    return 'blog' // Change here according to wordpress page template 
  },
}

Answer 1

默认情况下，您无法获得异步布局。尝试使“布局组件”绑定到存储或可观察的数据。

components / layout-test-1

<template lang="pug">
  div
    h1 layout-test-1
    slot
</template>

components / layout-test-2

<template lang="pug">
  div
    h1 layout-test-2
    slot
</template>

[页面/索引] >>

<template lang="pug">
    div(:is='layout')
      div(@click="layout = 'layout-test-1'") layout: "layout-test-1"
      div(@click="layout = 'layout-test-2'") layout: "layout-test-2"
      h2 Page
</template>

<script>
import LayoutTest1 from "../../components/layout-test-1";
import LayoutTest2 from "../../components/layout-test-2";

export default {
  components: { LayoutTest1, LayoutTest2 },
  asyncData: () => ({
    layout: "layout-test-1"
  })
};
</script>