Question

试验Vue.js，尝试使用v-for指令显示组件中维基百科API调用的结果，但后端无法正常工作，我不知道它是什么。

HTML

<div id="app">
<input type="text" v-model="searchTerm" v-on:keyup="getResults">
  <searchResult
    v-for="item in results"
    v-bind:result="item"
    v-bind:key="item.key"
  ></searchResult>
</div>

的Javascript

new Vue({
  el: '#app',
  data: {
    api: "https://en.wikipedia.org/w/api.php?",
    searchTerm: 'Ron',
    searchDataString: "action=opensearch&format=json&origin=*&uselang=user&errorformat=html&search="+this.searchTerm+"&namespace=0%7C4&limit=20&profile=fuzzy",
    searchCall: this.api+""+this.searchDataString,
    results: []
  },
  methods: {
    getResults() {
        this.searchCall = this.api+"action=opensearch&format=json&origin=*&uselang=user&errorformat=html&search="+this.searchTerm+"&namespace=0%7C4&limit=20&profile=fuzzy";
      //console.log( this.searchCall );
      axios.post( this.searchCall )
      .then(response => { this.processResults(response.data) });
    },
    processResults(data) {
        //console.log( data );
        for(var i = 0; i < data[1].length; i++) {
        var resultItem = { key:i, link:data[3][i], name:data[1], description:data[2][i] };
        this.results.push(resultItem);
        console.log(resultItem);
      }
    }
  }
});

Vue.component( "searchResult", {
    props:['result'],
  template: "<a target='_blank' href='{{ result.link }}'><div class='search-result'><h3>{{ result.name }}</h3><p>{{ result.description }}</p><div></a>"
});

我想到的两个问题是

键入输入时显示在控制台中的错误消息，
结果数组正在创建空对象而不是传递数据

当我在控制台中查看数组时，它显示的只是getter和setter。我对此很陌生，所以也许这就是它应该做的事情。

我非常接近于让这个工作，但我在我的智慧结束时，非常感谢帮助。

Answer 1

您的代码存在的问题是html标记不区分大小写，因此命名组件searchResult会导致问题。如果您需要使用searchResult，则必须在模板中使用<search-result>。我发现最好只是完全避免这个问题并给出组件小写名称。以下是有关该问题的文档：https://vuejs.org/v2/guide/components.html#Component-Naming-Conventions

您提到“输入时在控制台中显示的错误消息”。我没有在复制和粘贴代码时遇到任何错误（除了忘记包含axios）。你得到什么错误？

Vue.js - 无法在组件中显示API调用的结果

1 个答案: