Задать вопрос
@Sulti
Учу javaScript
vue

Как передать массив данных в тег component при динамическом переключении компонентов?

Учу Vue, хочу узнать как передать данные(которые находятся в массиве) в каждый отдельный компонент при динамическом переключении:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css">

</style>
</head>

<body>
	<div id="dynamic-app" style="width: 400px; overflow: auto;">
		<button v-for="compon in components" :key="compon" 
		@click="currentTab = compon">{{compon}}</button>
		<component :is="goTab" ></component>
	</div>
	<script src="vue.js"></script>
	<script src="workPlace1.js"></script>
</body>
</html>


"Use strict";

Vue.component('tab-one', {
	props:['text'],
	template: `<div> Это таб один </div>`
});
Vue.component('tab-two', {
	props:['text'],
	template: `<div> Это таб два </div>`
});
Vue.component('tab-three', {
	props:['text'],
	template: `<div> Это таб три </div>`
});
let app1 = new Vue({
	el: "#dynamic-app",
	data: {
		currentTab: "one",
		components:['one', "two", "three"],
		texts: ["Сегодня я увидел белый свет", "Потом пошел я прогуляться", "Пришел домой и я"]
	},
	computed: {
		goTab() {
			return "tab-" + this.currentTab.toLowerCase();
		}
	}
});
  • Вопрос задан
  • 107 просмотров
4 комментария
Подписаться 1 Средний 4 комментария
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js 
computed: {
  currentTabProps() {
    return {
      is: `tab-${this.currentTab}`,
      text: this.texts[this.components.indexOf(this.currentTab)],
    };
  },
},

<component v-bind="currentTabProps"></component>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик VUE (Senior, Middle+)
SOFT DIVISION • Ярославль
от 150 000 до 300 000 ₽
Fullstack-разработчик (Python, Vue, Nuxt)
Finder
от 200 000 до 300 000 ₽
Fullstack разработчик (Laravel+Vue)
Данафлекс • Казань
от 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Парсинг с криптобирж
19 мая 2024, в 11:50
2000 руб./в час
Разработка дизайна для тг вебапп
19 мая 2024, в 11:50
7000 руб./за проект
Разработать дизайн главной страницы
19 мая 2024, в 11:20
3000 руб./за проект
Ещё заказы