\n <\/td>\n | <script<\/span>><\/span><\/td>\n <\/tr>\n \n <\/td>\n | import<\/span> axios<\/span> from<\/span> '<\/span>axios'<\/span><\/span>;<\/span><\/td>\n <\/tr>\n \n <\/td>\n | import<\/span> AppDisplayPost<\/span> from<\/span> '<\/span>./AppDisplayPost'<\/span><\/span>;<\/span><\/td>\n <\/tr>\n \n <\/td>\n | <\/span><\/td>\n <\/tr>\n \n <\/td>\n | export<\/span> default<\/span> {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | components:<\/span> { '<\/span>app-display-post'<\/span><\/span>:<\/span> AppDisplayPost },<\/span><\/td>\n <\/tr>\n \n <\/td>\n | data<\/span>() {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | return<\/span> {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | apiResponse:<\/span> '<\/span>'<\/span><\/span>, //<\/span> initial loading or error messages.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | wpPosts:<\/span> [], //<\/span> REST API response data goes here.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | wpData, //<\/span> global data made available via wp_localize_script. <\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | };<\/span><\/td>\n <\/tr>\n \n <\/td>\n | },<\/span><\/td>\n <\/tr>\n \n <\/td>\n | mounted<\/span>() { this<\/span>.getPosts<\/span>(); },<\/span><\/td>\n <\/tr>\n \n <\/td>\n | methods:<\/span> {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | async<\/span> getPosts<\/span>( route<\/span> =<\/span> '<\/span>posts'<\/span><\/span>, namespace<\/span> =<\/span> '<\/span>wp/v2'<\/span><\/span> ) {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | try<\/span> {<\/span><\/td>\n <\/tr>\n \n <\/td>\n | /*<\/span> Note: the per_page argument is capped at 100 records by the REST API.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | * https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | */<\/span><\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | const<\/span> restURL<\/span> =<\/span> this<\/span>.wpData<\/span>.rest_url<\/span>;<\/span><\/td>\n <\/tr>\n \n <\/td>\n | const<\/span> postsPerPage<\/span> =<\/span> 100<\/span>; //<\/span> default is 10.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | const<\/span> fields<\/span> =<\/span> '<\/span>id,title,vue_meta'<\/span><\/span>; //<\/span> retrieve data for specific fields only.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | <\/span><\/td>\n <\/tr>\n \n <\/td>\n | //<\/span> send an initial request and await the response to get the total number of posts.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | const<\/span> response<\/span> =<\/span> await<\/span> axios<\/span>(<\/span><\/td>\n <\/tr>\n \n <\/td>\n | \`<\/span>\${<\/span>restURL}<\/span><\/span>/\${<\/span>namespace}<\/span><\/span>/\${<\/span>route}<\/span><\/span>?per_page=\${<\/span>postsPerPage}<\/span><\/span>&page=1&_fields=\${<\/span>fields}<\/span><\/span>\`<\/span><\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | );<\/span><\/td>\n <\/tr>\n \n <\/td>\n | <\/span><\/td>\n <\/tr>\n \n <\/td>\n | //<\/span> since partial data is already available from this response, make it available.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | this<\/span>.wpPosts<\/span> =<\/span> response<\/span>.data<\/span>;<\/span><\/td>\n <\/tr>\n \n <\/td>\n | this<\/span>.isDataAvailable<\/span> =<\/span> true<\/span>;<\/span><\/td>\n <\/tr>\n \n <\/td>\n | <\/span><\/td>\n <\/tr>\n \n <\/td>\n | /*<\/span><\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | * calculate total number of required API requests using the header fields from the response. <\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | * headers['x-wp-total']: Total WordPress Posts<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | * headers['x-wp-totalpages'] Total number of pages based on the per_page param.<\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | */<\/span><\/span><\/span><\/td>\n <\/tr>\n \n <\/td>\n | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |