[Vuejs]-How to get json data out of a scope after fetching data in Vue?

by

0👍

✅

In your setMovies function, You can set the response in the movies variable and then return that variable from your setup.

function setMovies(apiResponse) {
  movies.value = apiResponse
}

return { movies };

Live Demo :

const { ref, onMounted } = Vue;

const App = {
  setup() {
    const movies = ref([])

    onMounted(() => {
      const apiResponse = [{
        id: 1,
        name: 'Movie 1'
      }, {
        id: 2,
        name: 'Movie 2'
      }, {
        id: 3,
        name: 'Movie 3'
      }];
      setMovies(apiResponse);
    })
    
    function setMovies(res) {
      movies.value = res;
    }

    return {
      movies
    };
  }
};
Vue.createApp(App).mount("#app");
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <pre>{{ movies }}</pre>
</div>

0👍

Add ‘movies’ to the return statement at the bottom of your code, then you should be able to render it.

Leave a comment