this.articles - это не массив, у массивов метод push есть. Изначально да - массив, но когда вы в created вызываете getArticles, производится перезапись свойства. Неплохо было бы разобраться, что на самом деле возвращает запрос на получение статей - уж не объект ли?Да, не массив, а объект. Я просто и так и так пробовал. Смог добавить таким способом.
this.articles = Object.assign(this.articles, response.data.payload);
Но значение добавилось не так как нужно.
Object.assign модифицирует первый аргумент, а не создаёт новый объект.v-for (как и методы - forEach, map, ...) не будет его обрабатывать. Доставайте из объекта массив значений и уже его элементы добавляйте в articles:this.articles.push(...Object.values(response.data.payload));getArticles можно просто заменить один массив другим:this.articles = Object.values(response.data.payload);articles на пустой объект, а в getArticles по получении данных просто выполняйте присваивание: this.articles = response.data.payload. А там, где пытаетесь concat выполнить, создавайте новый объект, в который будут копироваться свойства существующего и результат запроса:this.articles = { ...this.articles, ...response.data.payload };
// или
this.articles = Object.assign({}, this.articles, response.data.payload);marker.on('popupopen', function(e) {
new Vue({ el: e.popup._contentNode });
});this.timeout = setTimeout(...beforeRouteLeave(to, from, next) {
clearTimeout(this.timeout);
next();
},Документация прочитана, наверно не настолько внимательно, чтобы понять
check-in-changed и check-out-changed.
filters: [
{ name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
{ name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
{ name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
{ name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
],computed: {
filteredProfiles() {
return this.filters.reduce((profiles, { value, getter }) => {
return value
? profiles.filter(n => getter(n) === value)
: profiles;
}, this.profiles);
},Vue.component('filter-select', {
props: [ 'name', 'options', 'value' ],
template: `
<div>
<p>{{ name }}<p>
<select :value="value" @change="$emit('input', $event.target.value)">
<option value="">-</option>
<option v-for="n in options">{{ n }}</option>
</select>
</div>`
});computed: {
filterOptions() {
return this.filters.map(n => [...new Set(this.profiles.map(n.getter))]);
},<filter-select
v-for="(n, i) in filters"
v-model="n.value"
:options="filterOptions[i]"
:name="trans(n.name)"
></filter-select>methods: {
resetFilters() {
this.filters.forEach(n => n.value = '');
},<button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button><select v-model="brand" class="custom-select">filteredProfiles() {
return this.profiles.filter(n => n.brand.name === this.brand);
},<div v-for="profile in filteredProfiles" class="row feed">:license="{
old_price: 20,
price: 200,
title: 2,
}"computed: {
brands() {
return [...new Set(this.profiles.map(n => n.brand.name))];
},
},<option v-for="brand in brands" :value="brand">{{ brand }}</option>const router = new VueRouter({
routes: [
{ path: '/', component: { template: '<div>Home</div>' } },
{ path: '/foo', component: { template: '<div>Foo</div>' } },
{ path: '/boo', component: { template: '<div>Boo</div>' } },
],
});
new Vue({
router,
el: '#app',
data: () => ({
routeIndex: 0,
}),
created() {
setInterval(() => {
const { routes } = this.$router.options;
this.routeIndex = (this.routeIndex + 1) % routes.length;
this.$router.push(routes[this.routeIndex]);
}, 1000);
},
});<div id="app">
<router-view></router-view>
</div>if (!this.map) {
this.map = DG.map(...);
this.marker = DG.marker(...);
} else {
this.map.panTo(...)
this.marker.setLatLng(...);
}Через обертку <div class="container-avatar"><Avatar/></div> - в этом варианте лишний html елемент
<div v-for="item in flightsData">
<div>Price: {{ item.price }}</div>
<div v-for="f in item.flights">
<div>Departure: {{ f.cities.departureCity }}, {{ f.departureTime }}</div>
<div>Arrival: {{ f.cities.arrivalCity }}, {{ f.arrivalTime }}</div>
</div>
</div>this.flightsData = response.data.filter(n => val.includes(n.flights[0].airline.code));пишет ошибку что свойства id нету
isShow() {
return ((this.getProject() || {}).creator || {}).id === this.user.id;
},как в другом компоненте дождаться пока метод fetch() положит данные с store?
v-if="данные" тому элементу/компоненту, что эти данные использует.
methods: {
select(airline) {
const index = this.selected.indexOf(airline);
if (index !== -1) {
this.selected.splice(index, 1);
} else {
this.selected.push(airline);
}
},
},computed: {
checkedAll: {
get() {
return this.airlines.every(n => this.selected.includes(n.name));
},
set(val) {
this.selected = val ? this.airlines.map(n => n.name) : [];
},
},
},AJAX запрос <...> нужен watch?
что лучше использовать
data: () => ({
items: [
{ active: false, text: '...' },
{ active: false, text: '...' },
...
],
}),<div
v-for="n in items"
v-text="n.text"
:class="[ { active: n.active }, 'toggle' ]"
@click="n.active = !n.active"
></div>а как сделать чтобы не городить кучу даныx в data?
data: () => ({
itemsCount: 5,
active: [],
}),
methods: {
toggle(item) {
const i = this.active.indexOf(item);
if (i === -1) {
this.active.push(item);
} else {
this.active.splice(i, 1);
}
},
},<div
v-for="i in itemsCount"
v-text="`Item ${i}`"
:class="[ { active: active.includes(i) }, 'toggle' ]"
@click="toggle(i)"
></div>Чето я вообще ничего найти не могу.
perPage: 10, // или 20, или 50, это вам виднее... да и настраиваемым можно его сделать
page: 1,pages() {
return Math.ceil(this.items.length / this.perPage);
},
pageData() {
const end = this.page * this.perPage;
return this.items.slice(end - this.perPage, end);
},<div v-for="item in pageData">
...goTo(page) {
this.page = Math.max(1, Math.min(this.pages, page));
},
next(change) {
this.goTo(this.page + change);
},<button @click="goTo(1)">в начало</button>
<button @click="next(-1)">предыдущая страница</button>
<button @click="next(+1)">следующая страница</button>
<button @click="goTo(pages)">в конец</button>