PPID

new Vue({ el: '#app', data : { search : '', form : { kategori : '' }, ppid : [], database : [], kategori : [], currentPage : 1 }, methods: { async getPpid(){ await axios.get(`https://ppid.pemalangkab.go.id/index.php/rest/api/dashboard`, { headers: { 'Content-Type' : 'multipart/form-data', 'Api-key' : 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEwOSIsImVtYWlsIjoibWFmYXRpa2h1bGhhYmliaUBnbWFpbC5jb20iLCJwZXJtaXNzaW9uIjoiMiIsImlhdCI6MTY4ODU0ODExOSwiZXhwIjoxNjg4NTg0MTE5fQ.u7JmtXslkYByiExV1YA-O3dqL3V9bLWzHbnybLTAzWI' }}) .then(res => { // handle success this.ppid = res.data; }) .catch(err => { this.ppid = err.response.data }) }, async getDatabase(){ await axios.get(`https://ppid.pemalangkab.go.id/index.php/rest/api/ppid?page=${this.currentPage}&search=${this.search}&status=all&kategori=${this.form.kategori}`, { headers: { 'Content-Type' : 'multipart/form-data', 'Api-key' : 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEwOSIsImVtYWlsIjoibWFmYXRpa2h1bGhhYmliaUBnbWFpbC5jb20iLCJwZXJtaXNzaW9uIjoiMiIsImlhdCI6MTY4ODU0ODExOSwiZXhwIjoxNjg4NTg0MTE5fQ.u7JmtXslkYByiExV1YA-O3dqL3V9bLWzHbnybLTAzWI' }}) .then(res => { // handle success this.database = res.data; }) .catch(err => { this.database = err.response.data }) }, async getKategori(){ await axios.get(`https://ppid.pemalangkab.go.id/rest/api/kategori`, { headers: { 'Content-Type' : 'multipart/form-data', 'Api-key' : 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6IjEwOSIsImVtYWlsIjoibWFmYXRpa2h1bGhhYmliaUBnbWFpbC5jb20iLCJwZXJtaXNzaW9uIjoiMiIsImlhdCI6MTY4ODU0ODExOSwiZXhwIjoxNjg4NTg0MTE5fQ.u7JmtXslkYByiExV1YA-O3dqL3V9bLWzHbnybLTAzWI' }}) .then(res => { // handle success this.kategori = res.data; }) .catch(err => { this.kategori = err.response.data }) }, getSearch(){ this.currentPage = 1; this.getDatabase(); }, changeKategori(){ this.getDatabase() }, changePage(value){ this.currentPage = value; this.getDatabase(); } }, async mounted(){ await this.getPpid(); await this.getDatabase(); await this.getKategori(); } })