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>

视图未更新。此外，每当我尝试通过控制台访问响应/新闻对象时，我得到＆＃34;参考错误：响应/新闻未定义＆＃34;。 AJAX调用完美无缺。

Answer 1

在您的axios请求.then中，成功回调this未指向vue实例，因为您使用的是普通函数语法，请使用胖箭头=>函数语法，如下所示：< / p>

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实例，如下所示：

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是唯一的，你可以使用class。 data属性应该是一个函数。

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

Answer 3

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

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

Vue.js：数据更新后视图没有更新？

3 个答案: