How to get the REACT element?

Question

Vue.js

Good afternoon, there is such a format

export const articles = [
    {
        "id": "56c782f18990ecf954f6e027",
        "date": "2016-06-09T15:03:23.000Z",
        "title": "Commodo qui incididunt",
        "text": "Commodo qui incididunt ex ut ea nulla et eu aliquip duis. Aute deserunt excepteur ullamco fugiat sunt aliquip exercitation do sint incididunt. Amet consectetur sint irure reprehenderit fugiat amet mollit. In commodo mollit ullamco cillum pariatur eiusmod cillum aute mollit. Culpa non sint eiusmod ad dolor velit dolore voluptate do adipisicing. Cupidatat sint est magna officia qui magna eu elit qui excepteur fugiat duis ex labore.\n\nAliquip veniam ad reprehenderit mollit exercitation id enim ut exercitation. Esse irure ipsum minim laborum reprehenderit irure ut. Tempor excepteur nisi nulla nostrud amet id cillum. Sint velit sint officia aliqua sint quis deserunt.\n\nAliquip dolor cillum deserunt enim nulla dolor amet irure cupidatat commodo laboris id aliqua. Labore aliqua adipisicing Lorem id adipisicing. Ad cupidatat et do anim ex commodo elit magna ad consequat. Nostrud sit eu laborum ut consequat fugiat aute culpa. Lorem tempor quis sunt ad consequat excepteur est. Enim voluptate cillum Lorem ex fugiat ea qui. Irure aute magna dolore eiusmod minim non ad anim dolore sint et.",
        "comments": [
            {
                "id": "qwerqwer",
                "user": "Gilliam Underwood",
                "text": "Velit anim deserunt elit velit est fugiat duis eiusmod eu do incididunt ut tempor voluptate. Officia dolor aliqua id anim mollit pariatur id commodo. Laborum minim non ut aliquip commodo est consectetur. Mollit eu aliqua tempor est nulla ullamco irure. Sit non amet et eiusmod cillum ex cillum anim incididunt ad laboris mollit. Sunt quis incididunt elit ea qui non ullamco aliquip consequat voluptate eiusmod est. Irure laboris amet culpa sit aliquip."
            },
            {
                "id": "lkjhsdlfkg",
                "user": "Dolly Franklin",
                "text": "Aliquip id nostrud adipisicing irure. Labore reprehenderit ea ex officia ullamco incididunt consequat elit amet quis commodo. Fugiat amet veniam cillum ut aliquip velit est esse minim fugiat eiusmod sint. Commodo ea in culpa deserunt."
            },
            {
                "id": "zxcvzcxvzxcv",
                "user": "Brennan Atkins",
                "text": "Nisi sit nisi cillum dolor fugiat sint do nostrud ex cillum cupidatat. Culpa do duis non et excepteur labore dolor culpa qui tempor veniam. Ex labore deserunt qui sit aute ad incididunt do cupidatat eiusmod reprehenderit ad. Qui laborum qui voluptate velit et consectetur ipsum enim dolore minim. Est sint velit tempor reprehenderit. Qui consectetur ad minim consequat."
            },
            {
                "id": "fghjfghjfghj",
                "user": "Jodi Humphrey",
                "text": "Non amet amet ut magna culpa dolore consequat occaecat. Commodo adipisicing laboris voluptate enim mollit mollit anim aliquip deserunt nostrud deserunt cillum est. Ad eu cupidatat dolor nostrud et minim id in dolor occaecat ad magna elit. Laboris elit laboris aliquip Lorem reprehenderit id amet reprehenderit laborum minim incididunt cupidatat eiusmod."
            },
            {
                "id": "ertyoertywte",
                "user": "Joyce Weber",
                "text": "Non qui Lorem qui commodo sint in esse non aliqua pariatur mollit veniam. Elit labore ad nisi anim adipisicing tempor velit commodo adipisicing ipsum ut. Nostrud cillum aliquip adipisicing id do occaecat est eiusmod adipisicing duis. Magna dolore et non nisi in non cillum officia elit non esse proident irure aute. Proident mollit amet enim dolore eiusmod dolor qui. Eiusmod reprehenderit cillum sit deserunt nostrud enim duis excepteur. Excepteur pariatur sunt in ipsum id minim est mollit."
            }
        ]
    },

Previously, I output article through such a simple method . Of course, I have an article for rendering and output . But I need to get comments text. How can I access it? if I got articles[0] for article, and articles.comments[0] for comments? Or how?
(<Article article = {articles[0]} />

Answer 1

Component code where all posts are stored:

It’s not true, you don’t store posts here, you use vuex.

@click="addPostToHistoryComp(post.id, post.title, post.body)"

And if you do not open the post through this link? Adding to the story must be done from the post component. And this click handler will not work - router-link does not generate a click event (you can subscribe to click.native).

paginatedData() {
  const start = this.page * 6;

What is page? - I don't see a property with that name in the component. As a result, you have start and end NaN, and the array of posts of the current page, respectively, is empty.

addPostToHistoryComp(val){
  this.$store.dispatch('transforPostToHistoryComp', { 
    pTitle: val.post.title,

What else is val.post? - you pass id, title and body separately to the method. It's better to pass the entire post object.

<li v-for="(historyPost, index) in historyPosts" class="post" :key="index">        
  <img src="src/assets/nature.jpg">
  <p class="boldText"> {{ post.title }}</p>

Since it will still be correct - historyPost or just post?

const todohistory = {
  title: payload.pTitle,
  body: payload.pBody,
  id: payload.pId
}
commit('ADD_TODO_HISTORY', todo)

You declare todohistory, and pass some strange todo to the mutation. What is it like?

ADD_TODO_HISTORY (state, todohistoryObject) {
  state.historyPosts.unshift(todoObject)
},

It's also unclear: todoObject - what is it, who is it, why is it, where did it come from?
UPD. Here is your code , brought to a relatively working state, think.

Answer 2

articles[0]. comments[0].text