How to pass an array of data to the component tag when switching components dynamically?

S

Sergey Saltanovich2020-07-20 12:27:38

Vue.js

Sergey Saltanovich, 2020-07-20 12:27:38

Learning Vue, I want to learn how to pass data (which is in an array) to each individual component when dynamically switching:

<!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();
    }
  }
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2020-07-20
@Sulti

computed: {
  currentTabProps() {
    return {
      is: `tab-${this.currentTab}`,
      text: this.texts[this.components.indexOf(this.currentTab)],
    };
  },
},

<component v-bind="currentTabProps"></component>