[Vuejs]-Show data in execution time vuejs 3

by

0👍

If you only want to get some data and show it in the table, then you don’t need any events.

UPDATE

It doesn’t really matter where you data is. You can put it in a composable or Pinia store.

Here is a basic example

const { createApp, ref, onMounted } = Vue 

const useStore = () => {
  const posts = ref([])
  const getData = () => {
    posts.value = []
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) =>  posts.value = data)
  }   
  return { posts, getData }
}

const Blog = {
  props: ['posts'],
  template: '#blog'
}

const App = {
  components: { Blog },
  setup() {    
    const { posts, getData } = useStore()    
    onMounted( () => getData());
    return { posts, getData }  
  }
}

const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
label { font-weight: bold; }
<div id="app" v-cloak>
<button @click="getData()">reload</button><br/>
<blog :posts="posts"></blog>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="text/x-template" id="blog">
<div v-for="post in posts" :key="post.id">
  <label>Id:</label>&nbsp; {{post.id}}<br/>
  <label>Title:</label>&nbsp; {{post.title}}<br/>
  <label>Body:</label>&nbsp; {{post.body}}<br/>
  <hr/>
</div>
</script>

Leave a comment