data: () => ({
items: [
{ buttonText: '+', className: 'container' },
{ buttonText: '-', className: 'container-fluid' },
],
...
}),<button
v-for="n in items"
v-text="n.buttonText"
:class="{ active : active === n.className }"
@click="active = n.className"
></button>items.slice... надо было унести в computed):<div v-for="item in items.slice((page - 1) * perPage, page * perPage)">
{{ item }}
</div>computed: {
numPages() {
return Math.ceil(this.items.length / this.perPage);
},
},methods: {
next(change) {
this.page = Math.max(1, Math.min(this.numPages, this.page + change));
},
},<button @click="next(-1)" :disabled="page <= 1">prev</button>
<button @click="next(+1)" :disabled="page >= numPages">next</button>{ path: '/city', component: City, props: () => ({ cityid: app.cityid }) }<router-view :cityid="cityid"></router-view>
watch: {
town_id(val) {
// ну а тут ваш запрос
}
}resultGenes() {
return this.filteredResultGenes.filter(elem => {
return elem.snps.every(n => n.snpgroup.every(m => m.group_id === 1));
});
}есть похожая задача, только мне необходимо сравнить два значения и если true то отрисовать блок. Every, как я понял возвращает лишь true или false. А есть какой-то метод, чтобы можно было в директиве v-if в массиве пройтись по всем объектам этого массива? ну т.е.
я хочу, чтобы сработала конструкция: v-if="type.id == date.activities.type_id " вот только activities может либо вообще не быть, либо быть пустым либо несколько их может быть.
v-if. Сделайте вычисляемое свойство, которое будет представлять данные, соответствующие условию, и выводите их все.
.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);
},