CODEWITHSUNDEEP
javascriptajaxmvvmvue.jsaxios
Rish
Rish

Reputation: 703

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

<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.

Upvotes: 1

Views: 3544

Answers (3)

hautami
hautami

Reputation: 1

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) => {
        })

Upvotes: 0

Borkes
Borkes

Reputation: 301

    <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"
  }]
}

Upvotes: 0

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

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);
    })
}

Upvotes: 3

Related Questions