Вызов функции из отрисованного компонента

Question

Есть родительский и дочерний компонент Дочерний это навбар в котором есть кнопки, на которых лежит функция создания таба, если убираю компонент и вставляю html код на прямую, то все работает, если делаю компонентом, то нет, подскажите как сделать

// Дочерний

<div>
    <div id="navbarMain">


<ul class="navbarul">
  
    <li class="navbarList"> 
      <div @click="newTab('Dislocation')">  
        <img src="@/assets/map.png" class="image">
      </div>
      <b-dropdown id="dropdown-1" text="Дислокация" class="m-md-2">
          <b-dropdown-item @click="newTab('Dislocation')">дислокация 1</b-dropdown-item>
      </b-dropdown>
    </li>

    <li class="navbarList" >   
      <div @click="newTab('Flight')">  
        <img src="@/assets/flight.png" class="image">
        <!-- <p class="navbarDescription">Рейсы▾</p> -->
      </div>
      <b-dropdown id="dropdown-1" text="Рейсы" class="m-md-2">
          <b-dropdown-item @click="newTab('Flight')">Рейсы 1</b-dropdown-item>
      </b-dropdown>
    </li>

    <li class="navbarList">  
      <div @click="newTab('Wagon')">
        <img src="@/assets/wagon.png" class="image">
      </div> 
      <b-dropdown id="dropdown-1" text="Вагоны" class="m-md-2">
          <b-dropdown-item @click="newTab('Wagon')">Вагоны 1</b-dropdown-item>
      </b-dropdown>
    </li>

    <li class="navbarList" >  
      <div @click="newTab('Report')">   
        <img src="@/assets/report.png" class="image">
      </div>
      <b-dropdown id="dropdown-1" text="Отчеты" class="m-md-2">
        <b-dropdown-item @click="newTab('Report')">Отчеты 1</b-dropdown-item>
      </b-dropdown>
    </li>
</ul>





</div>


</div>
  export default{
        name: 'Navbar',
        props: {
              tab:{
                type: String,
                default(){
                  return{}
                }

              }
        },
        // mixins: [Wagon]
        methods:{
          newTab(tabname) {
            this.tabs.push({'id': this.tabCounter++,
                            'name': tabname})
          }
        }

    }
    
    
 // Родительский 
 
  
    <div>
      <WagonNavbar/>


              <div>
                <b-card no-body class="leftTable">
                  <b-tabs card>
                    <b-tab v-for="i in tabs" :key="'dyn-tab-' + i.id">
                        <template #title>
                            <span>Таблица {{i.name}}</span>
                            <span @click="closeTab(i.id)">&nbsp;&nbsp;❌</span>
                        </template>
                        <b-card-text>
                            {{i.name}}
                    
                        </b-card-text>
                    </b-tab>
                  </b-tabs>
                </b-card>
              </div>

    </div>



import WagonNavbar from './Navbar/WagonNavbar.vue';




export default{
    name: 'WagonPark',
    components:{WagonNavbar},
    // mixins: [Wagon],
    data() {  
      return {
        tabs: [],
        tabCounter: 0,
        selected: ''
      }
    },

    methods:{
      closeTab(x) {
        for (let i = 0; i < this.tabs.length; i++) {
          if (this.tabs[i].id === x) {
            this.tabs.splice(i, 1)
          }
        }
      }, newTab(tabname) {
            this.tabs.push({'id': this.tabCounter++,
                            'name': tabname})
          }

       
    }
    }

Answer 1

Вы не передаёте в дочерний компонент свойство tabs от родительского. Поэтому он создаёт своё (нереактивное) свойство, которое никак нигде не отражается. Пусть ваш дочерний компонент передаёт родительскому событие, что нужно создать новый таб:

newTab(tabname) {
    this.$emit('new-tab', tabname);
}

А родительский компонент должен это событие перехватить и обработать:

<b-tab v-for="i in tabs" :key="'dyn-tab-' + i.id" v-on:new-tab="newTab">

БЛОГ НА HUSL

Вызов функции из отрисованного компонента

Ответы (1 шт):