<div @click="changeCategory(subcat)">
...
<div v-for="(v, k) in active">{{ k }}: {{ v }}</div>
changeCategory({ a, b }) {
this.active = { a, b };
},
Как сделать, чтобы при загрузке сайта первый пункт первого меню уже был выбранным?
created() {
this.changeCategory(this.categories[0].sub[0]);
},
v-if
/v-else
- один для показа форматированного значения, другой для редактирования:<input v-if="edit" v-model="price" @blur="edit = false">
<input v-else :value="formatPrice(price)" @focus="edit = true">
data: () => ({
edit: false,
price: 666,
}),
methods: {
formatPrice: price => `${(+price).toLocaleString()} руб.`,
},
computed: {
fullData() {
return this.posts.map(post => ({
post,
user: this.users.find(user => user.id === post.userId) ?? {},
}));
},
},
<div v-for="n in fullData">
<div>{{ n.post.title }}</div>
<div>{{ n.user.name }}</div>
<div>{{ n.post.body }}</div>
</div>
<input type="checkbox" v-model="sort">
<div v-for="dog in sortedDogs">
data: () => ({
sort: false,
}),
computed: {
sortedDogs() {
return this.sort
? [...this.allDogs].sort((a, b) => a.breeds[0].name.localeCompare(b.breeds[0].name))
: this.allDogs;
},
},
v-model
+ watch
:<input v-model="text">
watch: {
text(newVal, oldVal) {
console.log(newVal, oldVal);
},
},
Cannot read property 'concat' of null
В чем ошибка и как в итоге их объединить?
computed: {
fullArray() {
const { users, info } = this;
return user && info
? здесь объединяете данные массивов
: [];
},
},
data: () => ({
date: new Date(),
}),
filters: {
formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
formatDate2: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>
Некоторые HTML-элементы, такие как<ul>
,<ol>
,<table>
и<select>
имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как<li>
,<tr>
и<option>
могут появляться только внутри других определённых элементов.
Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:
<table> <blog-post-row></blog-post-row> </table>
Пользовательский компонент<blog-post-row>
будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибутis
предоставляет решение этой проблемы:
<table> <tr is="blog-post-row"></tr> </table>
v-model
. v-for
, которому будет передаваться массив с данными. Блок базовой комплектации примет примерно такой вид:baseOptions: [
{ name: 'Свойство 1', price: 10000 },
{ name: 'Свойство 2', price: 11000 },
...
<ul>
<li v-for="n in baseOptions">{{ n.name }} ({{ n.price }})</li>
</ul>
v-model
):extraOptions: [
{ name: 'Пакет 1', price: 16000, checked: false },
{ name: 'Пакет 2', price: 17000, checked: false },
...
<div v-for="n in extraOptions">
<input type="checkbox" v-model="n.checked">
<label>{{ n.name }}</label>
</div>
methods: {
sum: arr => arr.reduce((acc, n) => acc + n.price, 0),
computed: {
baseSum() {
return this.sum(this.baseOptions);
},
extraSum() {
return this.sum(this.extraOptions.filter(n => n.checked));
},
filters: {
price: val => `${val.toLocaleString()} р.`,
<span>{{ baseSum | price }}</span>
<span>{{ extraSum | price }}</span>
<gmap-info-window
:options="infoOptions"
:position="infoWindowPos"
:opened="infoWinOpen"
@closeclick="infoWinOpen = false"
>
{{ infoContent }}
</gmap-info-window>
onMarkerClick(e) {
this.infoWindowPos = e.latLng; // задаём положение окна, над кликнутым маркером
this.infoContent = JSON.stringify(e.latLng); // задаём контент окна, передаётся в слот
this.infoWinOpen = true; // открываем окно
},
created() {
const onClickOutside = e => this.opened = this.$el.contains(e.target) && this.opened;
document.addEventListener('click', onClickOutside);
this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},
const getMonthName = iMonth =>
new Date(0, iMonth).toLocaleString('ru-RU', { month: 'long' });
computed: {
groupedByMonth() {
return this.items.reduce((acc, n) => {
const key = getMonthName(n.date.split('-')[1] - 1);
(acc[key] = acc[key] || []).push(n);
return acc;
}, {});
},
},
<ul>
<li v-for="(items, month) in groupedByMonth" :key="month">
<h3>{{ month }}</h3>
<ul>
<li v-for="n in items" :key="n.id">{{ n }}</li>
</ul>
</li>
</ul>
groupedByMonth() {
return this.items.reduce((acc, n) => {
acc[n.date.split('-')[1] - 1].items.push(n);
return acc;
}, Array.from({ length: 12 }, (_, i) => ({
month: getMonthName(i),
items: [],
})));
},
<ul>
<li v-for="{ items, month } in groupedByMonth" :key="month">
<h3>{{ month }}</h3>
<ul v-if="items.length">
<li v-for="n in items" :key="n.id">{{ n }}</li>
</ul>
<div v-else>данных нет</div>
</li>
</ul>