Vue.js: The view doesn't update after data is updated?

Question

<div id="app">
<h1> News Aggregator </h1>
<div v-for="CurNews in news">
<div id="title">
<h1>{{CurNews.title}}</h1>
</div>
<div id="description">
<p>{{CurNews.description}}</p>
</div>
</div>
</div>








<script>
const API_KEY = "XXXXXXXXXX";
const url = "https://newsapi.org/v1/articles?";



const app = new Vue({
el: '#app',
data:{
    news: [{
    title:"ABC", description: "VXAEW"
    }]
    },
mounted(){
    axios.get("https://newsapi.org/v1/articles?source=the-times-of-india&sortBy=top&apiKey=XXXXXXXXXXX").then(function(response){
    this.news = response.data.articles;
    //app.$set(this.news, response.data.articles);
    console.log(response.data.articles);
    }).catch(function(error){
    console.log(error);
    })
}
});

</script>

The view does not update. Also, whenever I try to access the response/news object through the console, I get "Reference Error: response/news in not defined". The AJAX call works perfectly.

Vamsi Krishna · Accepted Answer · 2017-06-09 09:47:54Z

3

In your axios request .then sucess callback this is not pointing to the vue instance since you are using a normal function syntax, use fat arrow => function syntax instead like this:

mounted(){
    axios.get("your URL").then((response) => {
    this.news = response.data.articles;
    console.log(response.data.articles);
    }).catch(function(error){
    console.log(error);
    })
}

Or else declare a var vm at the start of your mounted block pointing the vue instance like this:

mounted(){
    var vm = this;
    axios.get("your URL").then(function(response) {
    vm.news = response.data.articles;
    console.log(response.data.articles);
    }).catch(function(error){
    console.log(error);
    })
}

edited Jun 9, 2017 at 9:47

answered Jun 9, 2017 at 9:42

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Borkes · Accepted Answer · 2017-06-09 09:53:06Z

0

    <div v-for="CurNews in news">
        <div id="title">
        <h1>{{CurNews.title}}</h1>
    </div>

id is unique, you can use class. The data attribute should be a function.

data(): {
 news: [{
  title:"ABC", description: "VXAEW"
  }]
}

answered Jun 9, 2017 at 9:53

Borkes

3011 gold badge3 silver badges11 bronze badges

1 Comment

Vamsi Krishna Over a year ago

That's not the problem... data must be a function for vue component instances

hautami · Accepted Answer · 2018-05-20 16:41:17Z

0

You can try using arrow function like:

fetch("/static/data/data_table.json", {
            method: "GET",
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            }
          }
        )
          .then((response) => {
            return response.json()
          }).then ((json) => {
          this.resultJson = json
        }).catch( (ex) => {
        })

answered May 20, 2018 at 16:41

hautami

14 bronze badges

Collectives™ on Stack Overflow

Vue.js: The view doesn't update after data is updated?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related