Vue.js - コンポーネント内のAPIコールの結果を表示するときに問題が発生する

Question

Vue.jsを試して、v-forディレクティブを使用してコンポーネントでWikipedia API呼び出しの結果を表示しようとしていますが、私はそれが何であるか分からない。私の心にある2つの問題は、コンソールで示したエラーメッセージ

• あるjsFiddle

  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>" 
  }); 
  

  へ

  リンク典型的結果のアレイがデータ

Iコンソールの配列を見空のオブジェクトを作成する代わりに、通過していることを全てが示して、入力をngの、そして

はゲッターとセッターです。私はこれに新しいので、それはおそらくそれがやっているものだ。

私はこの作業に近づいていますが、私は知恵の最後です。

Answer 1

コードに問題があります.HTMLタグでは大文字と小文字が区別されないため、コンポーネント名をsearchResultとすると問題が発生します。 searchResultを使用する必要がある場合は、テンプレートに<search-result>を使用する必要があります。私はそれだけで問題を回避し、コンポーネントに小文字の名前を付けるほうがよいと思います。問題のドキュメントは次のとおりです。https://vuejs.org/v2/guide/components.html#Component-Naming-Conventions

「入力時にコンソールに表示されるエラーメッセージ」と述べました。コードをコピーして貼り付ける際にエラーが発生しませんでした（斧を含むことを忘れる以外の）。あなたはどんなエラーを出していますか？