WordPress simple load more posts using Vue and WP Rest API

Muat lebih banyak postingan menggunakan Vue.js dan WP Rest API

Apa yang Baru?

• Sekarang menggunakan Vue 3@latest (CDN)
• Tidak diperlukan server atau langkah pembuatan, cukup jalankan index.html di browser Anda!

Kita akan melihat contoh berbasis komponen Vue minimalis yang akan mengambil postingan menggunakan WordPress Rest API.

Bukankah lebih keren menggunakan sesuatu seperti ini di markup Anda?

  <posts>
    <post
      class="post"
      :id="post.id"
      :title="post.title.rendered"
      :permalink="post.link">
    </post>
  </posts>

  <button @click="getPosts(page)">Load Posts</button>

Dengan kemampuan untuk menampilkan markup apa pun yang Anda inginkan dalam html pada kompilasi untuk kebutuhan gaya Anda. Jadi lain kali Anda perlu memuat lebih banyak untuk situs web Anda, markup HTML Anda tetap sama.

Atau mungkin coba kode seperti di bawah ini untuk jenis postingan lain.

  <movies>
    <movie
      class="movie"
      :id="movie.id"
      :title="movie.title.rendered"
      :permalink="movie.link"
      :genre="movie.genre"
      :duration="movie.duration
      :rating="movie.rating">
    </movie>
  </movies>