WordPress simple load more posts using Vue and WP Rest API

โหลดโพสต์เพิ่มเติมโดยใช้ Vue.js และ WP Rest API

มีอะไรใหม่?

• ตอนนี้ใช้ Vue 3@latest (CDN)
• ไม่จำเป็นต้องใช้เซิร์ฟเวอร์หรือขั้นตอนการสร้าง เพียงเรียกใช้ index.html ในเบราว์เซอร์ของคุณ!

เราจะดูตัวอย่างตามคอมโพเนนต์ Vue แบบมินิมอลลิสต์ที่จะดึงข้อมูลโพสต์โดยใช้ WordPress Rest API

คงจะดีไม่น้อยหากใช้สิ่งนี้ในมาร์กอัปของคุณ

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

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

ด้วยความสามารถในการส่งออกมาร์กอัปที่คุณต้องการในรูปแบบ html ในการคอมไพล์ตามความต้องการด้านสไตล์ของคุณ ดังนั้นในครั้งต่อไปที่คุณต้องการเพิ่มภาระให้กับเว็บไซต์ของคุณ มาร์กอัป HTML ของคุณจะยังคงเหมือนเดิม

หรืออาจลองใช้โค้ดด้านล่างสำหรับโพสต์ประเภทอื่น

  <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>