Vue.js: Die Ansicht wird nicht aktualisiert, nachdem Daten aktualisiert wurden?

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> 

Die Ansicht wird nicht aktualisiert. Auch wenn ich versuche, über die Konsole auf das Antwort-/Nachrichtenobjekt zuzugreifen, erhalte ich "Referenzfehler: Antwort/Nachrichten sind nicht definiert". Der AJAX-Anruf funktioniert einwandfrei.

Answer 1

In Ihrem axios anfordern .then Sucess Rückruf this nicht auf das vue Beispiel zeigt, da Sie eine normale Funktion Syntax verwenden, Fett Pfeil => Funktion Syntax stattdessen wie folgt verwenden:

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

Oder eine var deklarieren vm zu Beginn des montierten Block die vue weise wie folgt zeigen:

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

Answer 2

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

ID ist einzigartig, Sie können Klasse verwenden. Das Datenattribut sollte eine Funktion sein.

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