Vue.jsがレンダリングされませんテーブル

Question

マイテンプレートは次のとおりです。準備多くのデータをレンダリングするための

 <tbody id="deliveries-table"> 
     <tr v-for="item in deliveries"> 
      <td class="table-view-item__col"></td> 
      <td class="table-view-item__col" v-bind:class="{ table-view-item__col--extra-status: item.exclamation }"></td> 
      <td class="table-view-item__col">{{item.number}}</td> 
      <td class="table-view-item__col"><a href="{{item.sender_profile_url}}">{{item.sender_full_name}}</a></td> 
      <td class="table-view-item__col" v-if="item.courier_profile_url"><a href="{{item.courier_profile_url}}">{{item.courier_full_name}}</a></td> 
      <td class="table-view-item__col" v-if="item.delivery_provider_url"><a href="{{item.delivery_provider_url}}">{{item.delivery_provider_name}}</a></td> 
      <td class="table-view-item__col"> 
       <span style="font-weight: 900">{{item.get_status_display}}</span><br> 
       <span>{{item.date_state_updated}}</span> 
      </td> 
      </tr> 
     </tbody> 

私のjavascriptのコードは次のとおりです。

var monitorActiveDeliveries = new ActiveDeliveries(); 
monitorActiveDeliveries.fillTable(allDeliveries); 
class ActiveDeliveries { 
    constructor() { 
    this.table = new Vue({ 
     el: '#deliveries-table', 
     data: { 
     deliveries: [] 
     } 
    }); 
    } 
    fillTable (d) { 
    this.table.deliveries = d; 
    } 
} 

しかし、スクリプトの後の任意のTBODYにレンダリングを開始し、私はHTMLの空の場所を持っています。 どこが間違っていますか？あなたは<table>タグにあなたのVueのアプリをインスタンス化することができますが、

Answer 1

はまず、通常、あなただけsingle Vue instance on the whole pageをしたいので、一つのメインのdiv/bodyタグにVueのインスタンスを作成した方がよいかもしれません。

第2に、あなたのコードがうまくいくと思います（私はあなたの配送オブジェクトがどのように見えるかはわかりませんが）。fillTable()メソッドがおそらく呼び出されていない、つまり配送が空です。

私はあなたのコードに基づいて、この実施例を作った：http://jsfiddle.net/wmh29mds/

Answer 2

人生はそれはそうよりも簡単です。
私はこのディレクティブに間違いだ：私はちょうど次のバリアントが働いている、クラス名に単一のクォータを忘れてしまった

v-bind:class="{ table-view-item__col--extra-status: item.exclamation }" 

を：

v-bind:class="{ 'table-view-item__col--extra-status': item.exclamation }"