Есть такой код на vue
require('./initVue');
new Vue({
el: '#index',
data: {
loading: false,
offset: 6,
faq: [],
},
methods: {
getFaq() {
axios.get('/api/faq/' + this.offset)
.then(res => {
res.data.forEach( (el, index) => {
el.isActive = index == 0 ? true : false;
this.faq.push(el);
});
})
.catch((error) => console.log(error));
},
toggle: function (n) {
this.faq.forEach( (el, index) => {
el.isActive = index == n ? true : false;
});
}
},
mounted() {
this.getFaq();
}
});
Он используется на главной странице сайта с множеством блоков.
Если использовать такую структуру, то все нормально.
<div class="questions-and-answers-preview" id="index">
<div class="questions-list">
<div class="questions-item" v-for="(item, index) in faq">
<div class="accordion" v-bind:class="{ active: item.isActive }" @click.prevent="toggle(index)"><span>@{{ item.title }}</span><i class="fa fa-angle-down" aria-hidden="true"></i></div>
<div class="panel" v-show="item.isActive">
<p>@{{ item.text }}</p>
</div>
</div>
</div>
</div>
Но когда я выношу id в wrapper, сам блок с v-for не отображается, при том что данные получены
<div class="wrapper" id="index">
<!-- content -->
<div class="questions-and-answers-preview" >
<div class="questions-list">
<div class="questions-item" v-for="(item, index) in faq">
<div class="accordion" v-bind:class="{ active: item.isActive }" @click.prevent="toggle(index)"><span>@{{ item.title }}</span><i class="fa fa-angle-down" aria-hidden="true"></i></div>
<div class="panel" v-show="item.isActive">
<p>@{{ item.text }}</p>
</div>
</div>
</div>
</div>
<!-- content -->
</div>
В чем может быть проблема? Или может подскажите как организовать структуру для длинной страницы, подключать компонентами?
Спасибо заранее!
