2017-12-20 35 views
0

を働いていない:基本Vue.jsの例では、私はこのスーパーの基本的な出発点としてい

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 

    <link rel="stylesheet" type="text/css" href="Content/dictionary.css" /> 

    <script src="Scripts/kuroshiro.min.js"></script> 
</head> 
<body> 
    <div id="searchResultsVue"> 
     <table> 
      <tr v-for="r in results"> 
       {{ r.Result.ent_seq }} 
      </tr> 
     </table> 
    </div> 


    <script src="https://vuejs.org/js/vue.js"></script> 
    <script> 


     var searchResultsVue = new Vue({ 
      el: '#searchResultsVue', 
      data: { results: [{ Result: { ent_seq: 'asd' } }] } 
     }); 
    </script> 
</body> 
</html> 

を私は

を取得[Vueが警告]:プロパティまたはメソッド「R」は上で定義されていませんレンダリング中に参照されます。プロパティを初期化して、このプロパティがデータオプションまたはクラスベースのコンポーネントのどちらかに反応していることを確認します。参照:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

私はあなたがあなたのマークアップを修正する必要があり

答えて

1

これは、HTMLのレンダリング緩い慣行の問題ですについて特別な何かがあるようです。テーブルのDom要素を構築するときに、それはある構造を期待しており、その構造から逸脱しているものは定義の外側に押し出されます。

<table> 
     <tr v-for="r in results"> 
     </tr> 
    </table> 
    {{ r.Result.ent_seq }} 

よう

そしてそう

<table> 
     <tr v-for="r in results"> 
      {{ r.Result.ent_seq }} 
     </tr> 
    </table> 

行為は、エラーは、それがループの外ループ変数への呼び出しを見ていること、その後です。

As seen in this fiddleコードの周りにテーブル定義タグを追加すると、プッシュされなくなります。

1

を理解していません。 trは、子として正常に動作するためにはtdが必要です。

<tr v-for="r in results"> 
    <td>{{ r.Result.ent_seq }}</td> 
</tr> 
1

trの中にtdタグを使用する必要があります。 テーブルの行

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <div id="searchResultsVue"> 
 
     <table> 
 
      <tr v-for="r in results"> 
 
       <td>{{ r.Result.ent_seq }}</td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 

 

 
    <script src="https://vuejs.org/js/vue.js"></script> 
 
    <script> 
 
     var searchResultsVue = new Vue({ 
 
      el: '#searchResultsVue', 
 
      data: { results: [{ Result: { ent_seq: 'asd' } }] } 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

関連する問題