Vue.js：データの更新後にビューが更新されませんか？

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> 

ビューは更新されません。また、コンソールから応答/ニュースオブジェクトにアクセスしようとするたびに、「参照エラー：応答/ニュースが定義されていません」というメッセージが表示されます。 AJAX呼び出しは完全に機能します。あなたのaxiosで

Answer 1

、あなたは通常の関数の構文を使用しているので、.then成功事例のコールバックthisはVUEのインスタンスを指していない要求の代わりにこのよう=>関数の構文脂肪の矢印を使用します。

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

もないとVARを宣言このようなVUEのインスタンスを指して、あなたのマウントブロックの開始時にvm：

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は一意で、クラスを使用できます。データ属性は関数でなければなりません。

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