As in Vue.js to add data to an existing array?

Welcome.
Please help knowledgeable Vue.js

Trying to implement the uploading of content by clicking on the button (Pagination), i.e. to the case is this: when you go to the page loading articles, when clicking on "Load more" needs to take additional articles.

The main problem is that I can't combine 2 of the array.
Tried this.articles.concat(response.data.payload) and via Push.

But every time it throws a TypeError: this.articles.push is not a function. (In 'this.articles.push({ message: 'Baz' })', 'this.articles.push' is undefined) or TypeError: this.articles.concat is not a function. (In 'this.articles.concat(test)', 'this.articles.concat' is undefined)

Use code:
<template>
 <div class="main__inner useful_inner">
 <section class="section section_1 tittle__section">
 <div class="grid">
 <div class="section__wrapper">
 <div class="tittle-box">
<h1>{{documentContent.title}}</h1>
</div>
 <div class="tag-box">
 <button @click="addTag('all')" class="tag-box_item active" data-tag="all">
 <span class="tag-name">all</span>
 <span class="tag-count">{{countedTags.all}}</span>
</button>
 <button @click="addTag('radio')" class="tag-box_item" data-tag="radio">
 <img src="/static/img/tag_radio.svg" class="tag-img" alt="">
 <span class="tag-name">airwaves</span>
 <span class="tag-count">{{countedTags.radio}}</span>
</button>
 <button @click="addTag('article')" class="tag-box_item" data-tag="article">
 <img src="/static/img/tag_article.svg" class="tag-img" alt="">
 <span class="tag-name">article</span>
 <span class="tag-count">{{countedTags.article}}</span>
</button>
</div>
</div>
</div>
</section>
<!--<router view-->
 <section class="section section_2">
 <div class="grid">
 <div class="section__wrapper">
 <div class="articles-box">
 <div v-for="article in articles"
v-bind:item="article"
v-bind:key="article.oo_id">
 <a :href="'//useful/articles//' + article.oo_id" class="articles-box__item" data-tag="article.tags.category">
 <svg class="articles-box__item_svg" width="63" height="249" viewBox="0 0 63 249"
fill="none"
xmlns="http://www.w3.org/2000/svg">
 <rect x="0.76001" y="-3.28906" width="34.7626" height="291" fill="#ADCFF7"/>
 <path d="M43.2469 -7.25961 V-88.5448H35.0311V314.94H43.2469V173.697V123.377C43.2469 111.987 43.7479 102.088 51.7647 90.4762C61.7856 75.961 62.2866 65.3165 62.2866 57.575C62.2866 49.8336 60.2824 37.2537 51.7647 26.6092C44.9504 18.0936 43.2469 3.50254 43.2469 -7.25961 Z"
fill="#ADCFF7"/>
</svg>
 <div class="articles-box__item_inner">
 <div class="articles-box__item_tag">
 <img src="article.tags.iconWhite" alt="article.name" class="item__tag_img">
 <span class="item__tag_text">{{ article.tags.name }}</span>
</div>
 <div class="item__inner_info">
 <div class="info__top-box">
 <span class="info__title">id={{ article.oo_id }};name={{ article.name }} </span>
 <span class="info__descript">{{ article.description }}</span>
</div>
 <div class="info__bottom-box">
 <div class="info__bottom-box_date">{{ article.date }}</div>
 <div class="info__bottom-box_watched">
 <img src="/static/img/wacthed_eye.svg" alt=""><span>{{ article.views }}</span>
</div>
</div>
</div>
 <div class="item__inner_img">
 <img src="article.previewImage" alt="article.name">
</div>
</div>
</a>

 <button @click.prevent="loadMore">Load more</button>
 <a href="#" class="orange__link show_more">
 <span>Show more</span>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</template>

the <script>
 import from axios 'axios'
 FosJsRouting import from './FosJsRouting';

 export default {
 name: 'app',

 data() {
 let categoryValue = document.getElementById('category').value;
 console.log('categoryValue =' + categoryValue);
 let documentId = document.getElementById('documentId').value;
 console.log('documentId =' + documentId);
 return {
 userIsAuthorized: false,
 category: categoryValue,
 documentId: documentId,
 tags: ['all'],
 articles: [],
 documentContent: [],
 countedTags: [],
 page: 1,

}
},
 created() {
this.getDocument();
this.getCountedTags();
this.getArticles();
},
 methods: {
 loadMore: function() {
 this.page = this.page + 1;
 var vm = this;
 axios.get(FosJsRouting.generate('getArticleList', {category: this.category, tags: this.tags, page: this.page})).then(response => {
 // only 10 will be visible at any time
 if (response.data.status === 0) {
// Merges both arrays
 vm.articles = vm.articles.concat(response.data.payload);

}
 else {
console.log(response.data.message);
}
});
},
 addTag: function (value) {
 let allIndexTag = this.tags.indexOf('all');
 if (value === 'all') {
 this.tags = ['all'];
 } else if (this.tags.includes(value)) {
 if (allIndexTag !== -1) {
 this.tags.splice(allIndexTag, 1);
}
 this.tags = this.tags.filter(function (e) {
 return e !== value
});
 if (this.tags.length === 0) {
 this.tags = ['all'];
}
 } else {
 if (allIndexTag !== -1) {
 this.tags.splice(allIndexTag, 1);
}
this.tags.push(value);
}

console.log(this.tags);
this.getArticles();
console.log(this.tags);
},
 getArticles: function () {
 axios.get(FosJsRouting.generate('getArticleList', {category: this.category, tags: this.tags}))
 .then((response) => {
 if (response.data.status === 0) {
console.log(response.data.payload);
 this.articles = response.data.payload;
}
 else {
console.log(response.data.message);
}
});
},
 getDocument: function () {
 axios.get(FosJsRouting.generate('getDocumentContent', {id: this.documentId}))
 .then((response) => {
 if (response.data.status === 0) {
console.log(response.data.payload);
 this.documentContent = response.data.payload;
}
 else {
console.log(response.data.message);
}
});
},
 getCountedTags: function () {
 axios.get(FosJsRouting.generate('getCountedTags', {category: this.category}))
 .then((response) => {
 if (response.data.status === 0) {
console.log(response.data.payload);
 this.countedTags = response.data.payload;
}
 else {
console.log(response.data.message);
}
});
 // this.$router.push({name: 'articleList'});
}
}
}
</script>
March 19th 20 at 08:39
2 answers
March 19th 20 at 08:41
Solution
Yeah, 2 days of sitting. Not bad to know JS.
In General, everything is simple and obvious:

this.articles = {...this.articles, ...response.data.payload};
March 19th 20 at 08:43
How do you think you have there an array? You error message is even read? If "this.articles.push is not a function", it means this.articles is not an array, the arrays have the push method. Initially, Yes - the array, but when you call getArticles created, produced overwrite properties. It would be nice to understand what actually returns the request to get articles - I do not object it?
Yes, instead of an array object. I just both tried. Could add in this way.
this.articles = Object.assign(this.articles, response.data.payload);

But the value added is not right. How to add it so that it soared through the view?5c9a29c0e50d0634617316.png - Sonia.Franecki commented on March 19th 20 at 08:46
@Sonia.Franecki, how would I know? As and added as needed? I'm not aware of the structure of your data.

I would have left the array. To the object to make an array, you can use the Object.values:

this.articles.push(...Object.values(response.data.payload))

And getArticles, and loadMore (and anyway, think about how to combine them into one method - very similar to copy-paste is not cool). - ahmed_Osinski commented on March 19th 20 at 08:49
That's what happened. this.articles = {...this.articles, ...response.data.payload};
Thanks for the help. - Sonia.Franecki commented on March 19th 20 at 08:52

Find more questions by tags Vue.js