Vue.js：元素未定义？答案

【问题标题】：Vue.js: Element is not defined?Vue.js：元素未定义？
【发布时间】：2017-11-13 12:24:12
【问题描述】：

<body>
<center>
<div id="app">
<h1> News Aggregator </h1>

<div id="selector">
    <select v-model="selected">
        <option v-for="select in selection" :value="select">{{select}}</option>

    </select>
    <button @click="getNews(selected)"> Get news </button>
</div>
</center>


<div id = "news-container" v-for="result in res">
    <h1> result.title </h1>
    <p> result.description </p>
    </div>


</div>

<script>
const API_KEY = "e58c5c8781a44b8e94a4725a4606655c";
const url = "https://newsapi.org/v1/articles?";

const SELECTION = "BBC News,The Times of India,BBC Sport";

const app = new Vue({
    el: "#app",
    data: {
        res : [],
        selection : SELECTION.split(','),
        selected : 'bbc-news',
        response: []
    },
    mounted(){
        this.getNews(this.selected);
    },
    methods: {
        getNews(selected){
            selected = selected.replace(/\s+/g, '-').toLowerCase();
            axios.get(url+"source="+selected+"&sortBy=top&apiKey="+API_KEY).then((response)=>{
            console.log(response);
            this.res = response.data.articles;
            }).catch(function(error){
                console.log(error);
                });
            }
        }
    });

</script>

每当我尝试在控制台中显示 res 或 response 时，它都会显示该元素未定义。它正在获取服务器的数据，但不显示它。每当我在控制台中输入 res 或 response 时，我都会得到：未捕获的 ReferenceError：未定义 res 在:1:1

不过，console.log(response) 语句有效。

【问题讨论】：

res 是返回给服务器的响应。 req 正在从服务器获取。我打赌一个简单的console.log(data) 你会得到你想要的。
尝试将您的this.res = response.data.articles; 更改为this.data.res = response.data.articles;，看看它是否正常工作。
补充我的其他评论。不要在您的methods 中使用res 或response。你可以使用data。
@DavidR 没用。
您可以尝试使用开发工具并在那里显示您的请求和响应吗？

标签： javascript ajax vue.js axios

【解决方案1】：

我认为您的问题在于位置 html 元素。尝试这种方式，我认为它应该工作。

<body>
<div id="app">
  <h1> News Aggregator </h1>

  <div id="selector">
    <select v-model="selected">
      <option v-for="select in selection" :value="select">{{select}}</option>

    </select>
    <button @click="getNews(selected)"> Get news </button>
  </div>


  <div id="news-container" v-for="result in res">
    <h1> {{result.title}} </h1>
    <p> {{result.description}} </p>
  </div>
</div>
</body>

【讨论】：

发现问题。确实是 HTML 元素。我的（在
之前）在 div 结束之前结束。

【解决方案2】：

您将result.title 和result.description 打印为字符串文字，您需要将它们放在小胡子中以从数据中打印它们：

<div id = "news-container" v-for="result in res">
  <h1> {{result.title}} </h1>
  <p> {{result.description}} </p>
</div>

【讨论】：

是的，我的错。但问题仍然存在。