@NiceScript

Как загружать компоненты во vue в зависимости от ответа сервера?

Что имеется:
1) vue файл (естественно что-то тут не так, прошу помощи..)
<template >
  <div class="app" >
     {{dataArticle}} //подгружаем сюда сгенерированые данные
  </div>
</template>
<script>
import LoadFunctions from '@/services/LoadFunctions'
export default {
  name: 'settings',
  data () {
    return {
      dataArticle:  '' 
    }
  },
  mounted () {
    this.getArticle('10') // хочу получить статью номер 10
  },
  methods: {
    async getArticle (data) { // выполняем функцию из mounted
      const response = await LoadFunctions.getArticle(data) // отправляем запрос 
      this.dataArticle = response.data // получаем данные
    }
  }
}
</script>

2) Отправляем данные на сервер (файл /services/LoadFunctions)
export default {
  getArticle (data) {
    return Api().post('getArticle', data)
  }
}

3) Сервер обрабатывает запрос, обращается к монгодб ищет нужную статью.
возврат такой
data: {
  used_component:  'article_with_video',
  component_data: {
  	header: 'Заголовок',
  	text: 'Текст статьи',
  	video_url: 'http ссылка' 
  } 
}

....
И тут у меня проблемы
json то я определил в ответе,
но как мне подгрузить именно этот used_component, передав в него component_data?
С наступающим, тостерцы)
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
Splinter_1g
@Splinter_1g
.NET Core, VueJS
Через v-for для элемента component рендеришь компоненты из списка.
Пример на codesandbox
Но можно заметить, что оба компонента Component1 и Component2 импортированы в App компонент через импорт явно. Однако я такой подход в проектах не использую, а регистрирую все компоненты одним скриптом глобально (чтобы "не писать 100 раз import"). Эту регистрацию можешь посмотреть в файле index.js в папке components. Сам index.js вызываешь через import или require в main.js (там эта строка закомментирована). Это проблема codesandbox'a, что тамошние настройки бабела выкинут исключение, что компоненты еще не были транспилены, поэтому регистрацию сделал локально в App.vue.
PS У себя при глобальной регистрации имена регаю lower-camel-case'ом (пример). Можешь побаловаться с этим в зависимости от того какие имена компонентов у тебя приходят с сервера.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы