Framework7-vue-webpack inserted tabs problem


#1

Владимир @nolimits4web, помоги пожалуйста, уже несколько дней не могу победить, следующую проблему, не работают табы на странице которая открыта в таббаре, использовал начальный шаблон framework7-vue-webpack:

App.vue

    <f7-views tabs toolbar-through class="ios-edges" theme="green">
      <com-toolbar></com-toolbar>

      <f7-view id="view-main" tab>
      </f7-view>

      <f7-view id="view-sig" tab tab-active>
        <page-sig></page-sig>
      </f7-view>

      <f7-view id="view-chan" tab>
        <page-chan></page-chan>
      </f7-view>

tabbar.vue

<template>
<f7-toolbar tabbar labels >
      <f7-link tab-link tab-link-active href="#view-sig" icon-f7="favorites">Signal</f7-link>
      <f7-link tab-link href="#view-chan" icon-f7="pie">Channel</f7-link>
</f7-toolbar>
</template>

signal.vue

	<template>
		<f7-page>
			<f7-navbar>
				<f7-nav-title>Сигналы</f7-nav-title>
				<f7-nav-right><f7-link icon-f7="sort"></f7-link></f7-nav-right>
			</f7-navbar>
			
			    <f7-subnavbar>
			        <f7-segmented class="segmented-raised">
			            <f7-link tab-link class="mygreenbutton" href="#tab-1" tab-link-active>All</f7-link>
			            <f7-link tab-link class="mygreenbutton" href="#tab-2">Type</f7-link>
			            <f7-link tab-link class="mygreenbutton" href="#tab-3">Work</f7-link>
			        </f7-segmented>
				</f7-subnavbar>

			<f7-tabs>
				<f7-tab id="tab-1" tab-active>Tab 1</f7-tab>
				<f7-tab id="tab-2">Tab 2</f7-tab>
				<f7-tab id="tab-3">Tab 3</f7-tab>
			</f7-tabs>
		</f7-page>
	</template>

В общем поведение такое: табы которые во App.vue работают нормально, переключают страницы, а те которые внутри страницы signal.vue не работают, при нажатии каждый выделяется как активный, то есть если на все нажать все активные становятся и информация внутри табов не отображается.


#2

А можно JSFiddle собрать минимальный чтобы я мог посмотреть?


#3

Собрал и не знаю радоваться или нет… Всё отлично работает https://jsfiddle.net/55urp5ze/
Единственное отличие, от примера в том, что использую webpack и все шаблоны разделены в отдельные файлы. Куда копать дальше?


#4

Владимир @nolimits4web, залил на хостинг, абсолютно такой же пример, только уже с webpack:
https://framework7-template-vue-webpack-nacabcbpys.now.sh/
Все абсолютно так же в коде, но табы не работают, можно посмотреть…


#5

Я смотрю у вас первый View в коде к которому нет tab-link’а и в нем у вас табы с такими же id, используйте более менее уникальные ID


#6

Спасибо, убрал первый view и всё заработало! Хотя в одностраничном шаблоне без webpack это не как не влияло на работу…