Передача данных axios для просмотра шаблона

Question

Я создаю простой SPA, используя vue.js и axioz в качестве сценариев (не cli и т. Д.)

До сих пор я мог извлекать данные из json, затем отображать и разбивать на страницы списокПри нажатии на элемент я могу записать в журнал данные для конкретной записи.

HTML

<!--app-->
<div id="app">

    <!--articles-->
    <div class="row" style="background: #111; padding: 8em 0; width: 50%;">
            <div class="ctr">
                <div class="row articles page_content" style="padding: 0;">
                    <ul>
                        <li v-for="(post) in displayedPosts" @click="getSingle(post.id)">
                            <router-link :to="{ path: '/post/'+ post.id}" class="flex" >
                                <div class="row article_thumb">
                                    <img :src="post.url" :alt="post.title"/>
                                </div>
                                <div class="row article_excerpt">
                                    <h3 class="title">{{post.title }}</h3>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="row pagination">
                    <button type="button" v-if="page != 1" @click="page--"> << </button>
                    <button type="button" v-for="pageNumber in pages.slice(page-1, page+5)" @click="page = pageNumber"> {{pageNumber}} </button>
                    <button type="button" @click="page++" v-if="page < pages.length"> >> </button>
                </div>
            </div>
        </div>
        <!--articles-->

        <div class="row" style="background: #000; padding: 8em 0; width: 50%;">
            <div class="flex router">
                <router-view></router-view>
            </div>
        </div>

</div>
<!--app-->

VUE.JS

const Home = {
  template: "<div><h1>Click an article to update this view</h1></div>"
};

//post
var Post = {
  template:
    '<div class="row"><h1>Display data for Post ID  # {{$route.params.id}} here</h1><p style="color: red;">This is where I am stuck, cant display the post data, see example below.</p><p>{{title}}</p></div>',

  //post methods
  methods: {
    //get single post
    getSingle: function(id) {
      var self = this;
      this.id = this.$route.params.id;
      this.title = this.title;
      axios
        .get(this.baseUrl, {
          params: {
            id: this.id,
          }
        })
        .then(response => {
          this.post = response.data;
          this.title = response.data.title;
          console.log(this.title);
          console.log(this.post);
          console.log("You clicked post ID #" + this.id);
        })
        .catch(response => {
          console.log(error);
        });
    }
  },
  //post methods

  //post data
  data() {
    return {
      baseUrl: "https://jsonplaceholder.typicode.com/photos",
      posts: [],
      title: this.title
    };
  },

  //post created
  created() {
    this.getSingle(this.$route.params.id);
  },

  watch: {
    "$route.params": {
      handler(newValue) {
        const { id } = newValue;
        this.getSingle(id);
      },
      immediate: true
    }
  }
};
//post

//router
const router = new VueRouter({
  routes: [
    { path: "/", component: Home },
    { path: "/post/:id", component: Post }
  ]
});

//initial state
var paginationApp = new Vue({
  el: "#app",
  router: router,
  data: {
    posts: [],
    baseUrl: "https://jsonplaceholder.typicode.com/photos",
    page: 1,
    perPage: 2,
    pages: []
  },

  //initial state methods
  methods: {

    //get single
    getSingle() {},

    //get posts
    getPosts() {
      axios
        .get(this.baseUrl)
        .then(response => {
          this.posts = response.data;
        })
        .catch(response => {
          console.log(response);
        });
    },

    //set pages
    setPages() {
      let numberOfPages = Math.ceil(this.posts.length / this.perPage);
      for (let index = 1; index <= numberOfPages; index++) {
        this.pages.push(index);
      }
    },

    //paginate
    paginate(posts) {
      let page = this.page;
      let perPage = this.perPage;
      let from = page * perPage - perPage;
      let to = page * perPage;
      return posts.slice(from, to);
    }
  },

  //created
  created() {
    this.getPosts();
  },

  //watch
  watch: {
    posts() {
      this.setPages();
    }
  },

  //computed
  computed: {
    displayedPosts() {
      return this.paginate(this.posts);
    }
  }
});
//initial state

Или см. этот кодовый блок дляполный пример https://codepen.io/flashvenom/pen/YozyMx и обязательно извлеките журнал консоли.

Моя проблема в том, что я не могу записать в журнал заголовок или какие-либо внутренние поля объекта данных, так как я хочу иметь возможность добавитьзаголовок и т. д. в области просмотра.

Любая помощь или указатели будут высоко оценены.

Answer 1

Ответ находится в форме массива, и вы не можете получить доступ к элементу массива без циклического массива.

Если вы хотите получить заголовок первого сообщения, вы можете сделать это, как показано ниже,

this.title = response.data[0].title

Чтобы получить доступ ко всем заголовкам сообщений, вы можете использовать цикл v-for в шаблоне vue.Вот небольшой пример того, как вы можете сделать это,

<div v-for="post in posts">
    <span>{{ post.title }}</span>    
</div>