vuejs3 - Vue3 fetch json with JQuery - Stack Overflow

I am converting a Vue script from OptionsApi to CompositionApi. Using a JQuery fetch and it works fine in the OptionsApi. Cause I am inheriting some code, it's important to use JQuery fetch

The below is the CompositionApi script and error is in comment. Can someone point me where I am going wrong. Thanks in advance.

<script src=".2.1/jquery.min.js"></script>
<script type="importmap">
    {
      "imports": {
        "vue": "@3/dist/vue.esm-browser.js"
      }
    }
</script>


<script type="module">
        import { createApp, ref, defineProps, onMounted } from 'vue'
              
        const app1 = createApp({
          setup() {
                    onMounted(() => {
                        console.log('Hello')

                        let dataURL = ''
              
                        $.getJSON(dataURL, function(data) {
                            self.userData = data.rows;  **//breaks here, says userData is undefined**
                        });
                          
                        })  
                    var self = this // create a closure to access component in the callback below
                    let userData = ref([])
                    const message = ref('Hello debug!')
                return {              
                    message,
                    userData
                }
          }
        })
        app1.mount('#app')
</script>

I am converting a Vue script from OptionsApi to CompositionApi. Using a JQuery fetch and it works fine in the OptionsApi. Cause I am inheriting some code, it's important to use JQuery fetch

The below is the CompositionApi script and error is in comment. Can someone point me where I am going wrong. Thanks in advance.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
      }
    }
</script>


<script type="module">
        import { createApp, ref, defineProps, onMounted } from 'vue'
              
        const app1 = createApp({
          setup() {
                    onMounted(() => {
                        console.log('Hello')

                        let dataURL = 'https://somesite.com.au?id=memberAds'
              
                        $.getJSON(dataURL, function(data) {
                            self.userData = data.rows;  **//breaks here, says userData is undefined**
                        });
                          
                        })  
                    var self = this // create a closure to access component in the callback below
                    let userData = ref([])
                    const message = ref('Hello debug!')
                return {              
                    message,
                    userData
                }
          }
        })
        app1.mount('#app')
</script>

• vuejs3

Share Improve this question Follow asked Jan 7 at 0:18 user7492713user7492713 344 bronze badges 2

• I recommend going directly to Composition API with script setup and using the browser's native fetch. Will be simpler, faster and future proof because it's a standard. – kissu Commented Jan 7 at 8:21
• My answer does not suit your needs anymore? – kissu Commented Feb 27 at 11:38

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Something like this is native and follows the best Web standards from nowadays.

<script setup>
import { ref, onMounted } from 'vue'

const userPosts = ref([]);

onMounted(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1/posts')
  const result = await response.json()
  userPosts.value = result
})
</script>

<template>
  <p v-for="post in userPosts" :key="post.id">{{ post.title }}</p>
</template>

Here is a playground link.

---

Don't make it complex with the entire jquery/etc, you can omit that part during the migration whatsoever to keep the more simple and maintainable.

You're seeing the error because in Composition API you have no this inside the setup function. Instead of using this.userData (or self.userData), use userData:

setup() {
  const userData = ref([])
  onMounted(() => {
    $.getJSON('https://somesite.com.au?id=memberAds', function (data) {
      userData.value = data.rows
    })
  })
  return { userData }
}

Also pay attention to the fact userData is a ref() which means you don't reassign it. You assign the data to its .value.

---

More as a personal preference, I would turn getJson's callback argument into an arrow function. I find it cleaner (more readable) and also because you're not accessing any of its inner members (you're not using its this):

setup() {
  const userData = ref([])
  onMounted(() => {
    $.getJSON(
      'https://somesite.com.au?id=memberAds',
      ({ rows }) => (userData.value = rows)
    )
  })
  return { userData }
}

---

Lastly, as already suggested in other answers and comments, on general principles, you should refrain from mixing jQuery with Vue.
For fetching data, axios and fetch are two of the most popular options in Vue apps.