Javascript Vue.js：视图没有'；数据更新后是否更新？ 新闻聚合器 {{CurNews.title}

{{CurNews.description}

const API_KEY=“xxxxxxxxx”； 常量url=”https://newsapi.org/v1/articles?"; const app=新的Vue({ el:“#应用程序”， 数据：{ 新闻:[{ 标题：“ABC”，描述：“VXAEW” }] }, 安装的（）{ axios.get（“https://newsapi.org/v1/articles?source=the-印度时报&sortBy=top&apiKey=xxxxxxxxxx”）。然后（功能（响应）{ this.news=response.data.articles； //app.$set（this.news，response.data.articles）； 日志（response.data.articles）； }).catch（函数（错误）{ console.log（错误）； }) } });

---

视图不会更新。此外，每当我试图通过控制台访问response/news对象时，我都会得到“Reference Error:response/news in not defined”。AJAX调用工作得非常好

在axios请求中

。然后

成功回调

此

不指向vue实例，因为您使用的是正常的函数语法，请使用fat arrow

=>

函数语法，如下所示：

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

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

或者在装入的块的开头声明一个var

vm

，指向vue实例，如下所示：

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

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

---

您可以尝试使用箭头功能，如：

fetch（“/static/data/data\u table.json”{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
}
}
)
。然后（（响应）=>{
返回response.json（）
})。然后（（json）=>{
this.resultJson=json
}).catch（（ex）=>{
})

这不是问题所在。。。数据必须是vue组件实例的函数

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