this should do, call the function without this
mounted() {
loadData(this.apiLink);
},
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I thought i'd give composables a try following a few tutorials including J. Way's videos here In case it matters i use inertiajs
the task is simple. The controller returns an inertia page with a url as a prop. On mount i call a method defined in an composable with the prop as parameter
the page :
<script setup>
import usePagination from "../Use/usePagination.js";
const { loadData, list} = usePagination();
defineProps({ apiLink: String });
</script>
<template>
</template>
<script>
export default {
methods: {},
mounted() {
this.loadData(this.apiLink);
},
data() {
return {};
},
};
</script>
the usePagination composable
import { ref, computed } from "vue";
export default function () {
var list=ref()
function loadData(url) {
axios.get(url).then((response) => {
this.list = response.data.data;
});
}
return {
loadData,
list
}
}
i get the following error
TestPage.vue:88 Uncaught (in promise) TypeError: this.loadData is not a function
when i use the same function in a click event it works but not when is called in the mounted section.
there is something obvious here that i am missing
replace loadData(this.apiLink); with loadData(apiLink);
edit:
you need:
<script setup>
import usePagination from "../Use/usePagination.js";
const { loadData, list} = usePagination();
const props = defineProps({ apiLink: String });
onMounted(() => {
loadData(props.apiLink)
})
</script>
Please or to participate in this conversation.