CODEWITHSUNDEEP
vue.js
markzzz
markzzz

Reputation: 47995

Why Vue doesn't refresh list using props?

On my App, on mounted() method, I call an API, which give to me a JSON with a list of items; than, I update the prop I've set in my target Homepage component:

Homepage.pages = resJSON.data.pages;

Here's the App code:

<template>
  <div id="app">
    <Homepage title="PWA Test"/>
  </div>
</template>

<script>
import Homepage from './components/Homepage.vue'

export default {
  name: 'App',
  components: {
    Homepage
  },
  mounted() {
    let endpoint = "http://localhost:5000/api/graphql?query={pages(orderBy:{contentItemId:asc}){contentItemId,createdUtc,author,displayText,description%20}}";

    fetch(endpoint, {
        method:'GET',
        headers: {
            'Accept':'application/json',
            'Content-Type':'application/json'
        }
    })
    .then((response) => {
        // check for HTTP failure
        if (!response.ok) {
            throw new Error("HTTP status " + response.status);
        }

        // read and parse the JSON
        return response.json();
    })
    .then((res) => {
        Homepage.pages = res.data.pages;
    })
    .catch((error) => {
        console.log(error);
    });
  }
}
</script>

<style>

</style>

Here's the Homepage component:

<template>
  <div id="homepage">
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="page in pages" :key="page.description">@{{ page.description }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Homepage',
  props: {
    title: String,
    pages: []
  }
}
</script>

<style scoped>

</style>

But the ul doesn't update after receiving the JSON and updating the props pages. Where's my error?

Upvotes: 0

Views: 165

Answers (3)

Chamara Abeysekara
Chamara Abeysekara

Reputation: 1332

you need to get the response.json(); in a data property of the App and then pass it down to the Homepage component. So your code should you look like this,

App code:

<template>
  <div id="app">
    //binding page into data property 
    <Homepage title="PWA Test" :pages="pages"/>
  </div>
</template>

<script>
import Homepage from './components/Homepage.vue'

export default {
  name: 'App',
  data: function () {
    return {
      //data propety 
      pages : []
   }
  },
  components: {
    Homepage
  },
  mounted() {
    let endpoint = "http://localhost:5000/api/graphql?query={pages(orderBy:{contentItemId:asc}){contentItemId,createdUtc,author,displayText,description%20}}";

    fetch(endpoint, {
        method:'GET',
        headers: {
            'Accept':'application/json',
            'Content-Type':'application/json'
        }
    })
    .then((response) => {
        if (!response.ok) {
            throw new Error("HTTP status " + response.status);
        }

        // assign the result to the data property 
        this.page = response.json();
    })
    .then((res) => {
        Homepage.pages = res.data.pages;
    })
    .catch((error) => {
        console.log(error);
    });
  }
}
</script>

Upvotes: 2

Gopinath Sooriyakumar
Gopinath Sooriyakumar

Reputation: 76

I think there are some mistakes that you have done in your code, if you want change update prop value then you have to initialized your props values in script.

<template>
 <div id="homepage">
   <h1>{{ title }}</h1>
   <ul>
     <li v-for="page in currentPages" :key="page.description">@{{ page.description }} 
     </li>
   </ul>
  </div>
</template>

<script>
  export default {
     name: 'Homepage',
     props: {
       title: String,
       pages: []
     }
     data: function () {
        return {
          currentPages: this.pages
       }
     }

  }
 </script>

I hope this will help you to solve your issue- thanks!

Upvotes: 0

Jake Vasya
Jake Vasya

Reputation: 15

Do you pass the props in a template after this.pages = res.data.pages?

<Homepage :pages="pages" />

Upvotes: 0

Related Questions