Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

boyjarv's avatar

options API > Composition API attempt 1

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,

0 likes
10 replies
Ben Taylor's avatar

The const is fine. Just change current_page = 1 to current_page: 1

1 like
boyjarv's avatar

now its complaining about the async await

async 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;
}
boyjarv's avatar
ERROR in ./src/views/HomeView.vue?vue&type=script&setup=true&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/HomeView.vue?vue&type=script&setup=true&lang=js)

Module Error (from ./node_modules/vue-loader/dist/index.js):
[@vue/compiler-sfc] Missing semicolon. (11:5)

/Users/johnbiddulph/Documents/delialindon/delia/src/views/HomeView.vue
32 |    current_page: 1,
33 |  }
34 |  async const paginatedArtwork = (pageNo = 1) => {
   |       ^
35 |    let response = await axios.get(`artwork/contact/2?page=${pageNo}`);
36 |    console.log("RES: ", response);
MaverickChan's avatar
Level 47

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)
1 like

Please or to participate in this conversation.