Question

我正在使用vue.js和axioz作为脚本（不是cli等）创建一个简单的SPA

到目前为止，我已经能够从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

要访问所有帖子标题，可以在vue模板中使用v-for循环。这是一个有关如何实现此目标的小例子，

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

传递axios数据以查看模板

1 个答案: