@boyjarv Replace the const with:
let pagination = {
current_page: 1,
};
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Here is my options API:
<!-- Options API -->
<script>
import axios from 'axios';
import LaravelVuePagination from 'laravel-vue-pagination';
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld,
Pagination: LaravelVuePagination,
},
data() {
return {
artwork: [],
pagination: {
current_page: 1,
},
}
},
methods: {
async paginatedArtwork(pageNo = 1) {
// ID 2 = Delia
let response = await axios.get(`artwork/contact/2?page=${pageNo}`);
console.log("RES: ", response);
this.artwork = response.data.artworks;
this.pagination = response.data.artworks.links;
}
},
mounted() {
this.paginatedArtwork();
},
}
</script>
here is my Composition API:
<!-- Composition API -->
<script setup >
import { ref, onMounted } from "vue";
import axios from 'axios';
import LaravelVuePagination from 'laravel-vue-pagination';
import HelloWorld from '@/components/HelloWorld.vue';
const artwork = ref([]);
const pagination = {
current_page = 1,
}
const paginatedArtwork = (pageNo = 1) => {
let response = await axios.get(`artwork/contact/2?page=${pageNo}`);
console.log("RES: ", response);
artwork.value = response.data.artworks;
pagination = response.data.artworks.links;
}
onMounted(() => {
paginatedArtwork
})
</script>
It seems I have more or less everything in place but it's moaning about this:
current_page = 1,
this part:
const paginatedArtwork = (pageNo = 1) => {
let response = await axios.get(`artwork/contact/2?page=${pageNo}`);
console.log("RES: ", response);
artwork.value = response.data.artworks;
pagination = response.data.artworks.links;
}
some errors. async await... and if you use await , better put into a try catch block.
const paginatedArtwork = async (pageNo = 1) => {
try {
var response = await axios.get(`artwork/contact/2?page=${pageNo}`);
console.log("RES: ", response);
artwork.value = response.data.artworks;
pagination = response.data.artworks.links;
} catch (error) {
console.log(error.response)
}
}
and also , you will lose reactive if you change pageNo.
I would define the url as a variable like
var url = 'http://path.to/'
axios.get(url)
Please or to participate in this conversation.