Как динамически генерировать vue компонентов из пользовательских полей WordPress - PullRequest
Новая
       14

Как динамически генерировать vue компонентов из пользовательских полей WordPress

0 голосов
/ 22 апреля 2020

Я создаю веб-сайт, используя vue с nuxt, загружая данные с сайта Wordress через остальные API.

Я хотел бы дать клиенту возможность изменять шаблоны страниц, используя настраиваемые поля, поэтому Мне нужно динамически создавать свои vue шаблоны с vue компонентами, которые генерируются в зависимости от пользовательских полей, размещенных в редакторе страниц WordPress.

Это упрощается, но, например, если клиенты создают страницу с тремя пользовательскими полями: 

[custom-field type='hero']
[custom-field type='slider']
[custom-field type='testimonial']

Я могу получить информацию о поле через остальные API в объекте json, например: 

page: {
  acf: [
    {field 1: {
      {type: 'hero'},
      {content: '...'} 
    },
    {field 2: {
      {type:'slider'},
      {content: '...'} 
    },
    {field 3: {
      {type:'testimonial'},
      {content: '...'} 
    }
  }
}

Я внесу это в свой vue приложение, но тогда я бы шаблон динамически генерировать из списка возможных компонентов, сопоставленных с типами пользовательских полей. вышеприведенное выдает: 

<template>
  <Hero ... />
  <Slider ... />
  <Testimonial ... />
</template>

Будет ли это сделано с использованием директивы v-is (https://vuejs.org/v2/guide/components-dynamic-async.html), например: 

<component v-for="field in custom-fields" v-is="field.type" :data="field.data"/>?

Возможно ли это? Любая помощь будет принята с благодарностью.

...