.faq-content__row оформляете в виде отдельного компонента, у которого будут параметры - заголовок и описание, и свойство, отвечающее за показ описания:props: [ 'title', 'desc' ],
data: () => ({
showDesc: false,
}),<div class="faq-content__row">
<header class="faq-content__title">
<h2 class="faq-content__h2">{{ title }}</h2>
<div class="faq-content__button" @click="showDesc = !showDesc">+</div>
</header>
<p
:class="{
'faq-content__description': true,
'faq-content__description--active': showDesc,
}"
>{{ desc }}</p>
</div>v-for, будут создаваться экземпляры компонента:data: () => ({
items: [
{ title: '...', desc: '...' },
{ title: '...', desc: '...' },
...
],
}),<div class="wrapper">
<v-faq
v-for="item in items"
v-bind="item"
></v-faq>
</div><div>{{ someStringValue | limit(10) }}</div>filters: {
limit(str, limit) {
return str.length > limit ? str.slice(0, limit) + '...' : str;
}
}<div v-html="sup(someStringValue)"></div>methods: {
sup(val) {
return val.replace(/\.(\d+)/g, '<sup>$1</sup>');
}
}правильно ли использовать общий объект data
<clients-list :rows="clients" :headers="clientsTableHeaders"></clients-list>Vue.component('clients-list', {
props: [ 'rows', 'headers' ],
...
});clientsTableHeader.email.show <...> как это можно использовать при обработке списка клиентов
computed: {
activeHeaders() {
return this.headers.filter(n => n.show);
},
},<thead>
<tr>
<th v-for="header in activeHeaders">{{ header.title }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows">
<td v-for="header in activeHeaders">{{ row[header.name] }}</td>
</tr>
</tbody>получаю ошибку: this.currentGen.snps.genotypes is undefined
v-model компонентом f-select - он должен принимать параметр value, который будет определять значение элемента <select> внутри компонента, а при выборе пользователем какого-то пункта выбранное значение должно отправляться родителю:<select
:value="value"
@input="$emit('input', $event.target.value)"
...country, и свяжем его c экземпляром компонента, который ответственен за выбор страны:<f-select
v-model="country"
...disabled поставить в зависимость от выбора страны:<f-select
:disabled="!country"
...data: () => ({
items: [ '...', '...', ... ],
}),<a v-for="(n, i) in items" :href="`#item_${i}`">{{ n }}</a>
<ul>
<li v-for="(n, i) in items" :id="`item_${i}`">{{ n }}</li>
</ul>data: () => ({
showChars: 0,
...
}),computed: {
typedString() {
return this.string.slice(0, this.showChars);
},
},<h2>{{ typedString }}</h2>mounted() {
const intervalID = setInterval(() => {
if (++this.showChars === this.string.length) {
clearInterval(intervalID);
}
}, 50);
},data: () => ({
activeComponent: null,
components: [
{ name: 'component-1', label: '#1' },
{ name: 'component-2', label: 'а я второй' },
{ name: 'component-3', label: 'третьим буду' },
],
}),v-model:<select v-model="activeComponent">
<option v-for="n in components" :value="n.name">{{ n.label }}</option>
</select><component v-if="activeComponent" :is="activeComponent"></component>import lightbox from 'vlightbox'
Vue.use(lightbox)