Vue - テーブルの列をデータオブジェクトにバインドする方法は？

Question

私はVueを初めて使っています。ここに状況があります。私がここでやっているよりも良い方法があるはずです。

私は、単純な2列のHTMLテーブルを持っている：

<table id="contacts"> 
 
<tbody> 
 
    <tr> 
 
     <th class="column-1"> 
 
      Contact Id 
 
     </th> 
 
     <th class="column-2"> 
 
      Applications assigned count 
 
     </th>  
 
    </tr> 
 
     <tr class="odd" id="contacts_tr_1"> 
 
\t <td class="column-1"> 
 
     1 
 
     </td> 
 
\t <td class="column-2"> 
 
     247 
 
     </tr> 
 
     <tr class="even last" id="contacts_tr_2"> 
 
\t <td class="column-1"> 
 
     2 
 
     </td> 
 
\t <td class="column-2"> 
 
    0 
 
     </td> 
 
    </tr> 
 
     <tr class="even last" id="contacts_tr_2"> 
 
\t <td class="column-1"> 
 
     3 
 
     </td> 
 
\t <td class="column-2"> 
 
    44 
 
     </td> 
 
    </tr> 
 
     <tr class="even last" id="contacts_tr_2"> 
 
\t <td class="column-1"> 
 
     ......... 
 
     </td> 
 
\t <td class="column-2"> 
 
    ......... 
 
     </td> 
 
    </tr> 
 

 
     <tr class="even last" id="contacts_tr_2"> 
 
\t <td class="column-1"> 
 
     10 
 
     </td> 
 
\t <td class="column-2"> 
 
    76 
 
     </td> 
 
    </tr> 
 
</tbody> 
 
</table>

結果によって決定された私は、「アプリケーションの割り当て数」欄を（だけで、特定の行のために）更新したいですAJAXコールのしたがって、表が10行あると仮定すると、AJAX呼び出しは、行1,4および7の「Applications assigned count」列の値を更新する必要があると言うことがあります。それぞれ247,80および356である。私はこのようなJSONオブジェクトを私のVueデータオブジェクトとして使うことを考えています。なぜなら、AJAXレスポンスはこのように見えるからです。

data: { 
    num_of_applications_assigned: [ 
     { 
      "party_id": "1", 
      "num": "247"}, 
     { 
      "party_id": "4", 
      "num": "80"}, 
     { 
      "party_id": "7", 
      "num": "356"} 

    ] 
    }, 

私はAJAX呼び出しによって更新されますVueのデータオブジェクトへの「アプリケーションの割り当て数」列をバインドする方法があるかもしれないと思ったが、私は追加するよりも、この他を行う方法が表示されません各個人に固有のv-テキスト<TD>セルはい

let vm = this; 
    jQuery.ajax({ 
      url: myurl 
     }).then(function(response) {     
      for (var i = 0, len = vm.num_of_applications_assigned.length; i < len; i++) { 
      var party_id = vm.num_of_applications_assigned[i].party_id; 
      var dref = 'vm.num_of_applications_assigned_'+party_id; 
      var dnum = vm.num_of_applications_assigned[i].num; 
      eval(dref + ' = ' + dnum + ';'); 
      }   
    }); 

：

<div v-text="num_of_applications_assigned_1"></div> 
<div v-text="num_of_applications_assigned_2"></div> 
etc 

しかし、これは私が動的に参照を構築する必要があるとして、AJAX応答の結果とそれらのV-テキストを更新するいくつかの非常に複雑なコードを書くに私をリードしています、私が知っている評価が悪い - それが私がここで助けを求めている理由です！これを行うためのより良い方法は何ですか、またはこの状況に適したVueではありませんか？

Answer 1

テーブルとその行がすべてサーバー側で生成されるため、v-forは使用できません。

v-forを使用できない場合でも、サーバー側で追加作業を行う場合は、Vueを使用してデータをレンダリングすることができます。それはv-forよりもエレガントではありませんが、それは簡単です。

あなたはVueの2番目の列のセルの値を更新/レンダリングされ2列のテーブルを作成したい場合たとえば、あなたは、サーバー側でこのような何かを生成することがありました：

使用

<table id="app"> 
    <tr> 
     <td>1</td> 
     <td>{{ applications.party_1.num }}</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>{{ applications.party_2.num }}</td> 
    </tr> 
</table> 

あなたの好きなサーバー側の言語は、値party_1,party_2、party_3を動的に生成します。

これはそうのような基本的なデータ構造であることを意味：

applications: { 
    party_1: { num: 1 }, 
    party_2: { num: 2 } 
} 

これは、サーバー側で動的にその構造を作成するのは簡単でなければなりません。すると、ちょうどVueのインスタンスを作成し、そのデータ構造とその初期dataオブジェクトを移入：

HTMLがブラウザに表示され

new Vue({ 
    el: '#app', 
    data: { 
    applications: { 
     party_1: { num: 1 }, 
     party_2: { num: 2 } 
    } 
    } 
}); 

、Vueのインスタンスのマウントとは、そのdataオブジェクトから結合セルの値を更新します。これらの値はリアクティブであるため、その後のVueインスタンスの基礎データへの変更は自動的にレンダリングされます。

希望はこのことができます:)

Answer 2

Vueのアイデアは、すべてのデータを準備し、Vue.JSにレンダリングさせることです。だから、あなたのデータは、おそらく次のようになります。

data: { 
    assignedApplications: [ 
    { party_id: 1, num: 247 }, 
    { party_id: 2, num: 0 }, 
    { party_id: 3, num: 44 }, 
    { party_id: 4, num: 76 }, 
    { party_id: 5, num: 9 }, 
    ] 
    }, 
} 

その後、あなたはVueのは、それをレンダリングさせることができます：

<table> 
    <tr> 
     <th class="column-1">Contact Id</th> 
     <th class="column-2">Applications assigned count</th>  
    </tr> 
    <tr v-for="a in assignedApplications"> 
     <td>{{a.party_id}}</td> 
     <td>{{a.num}}</td> 
    </tr> 
</table> 

はそれを更新する方法、問題を残します。新しいデータを取得したら、配列this.assignedApplicationsを変更する必要があります。その後、Vueはテーブルを正しく再描画します。行に一意のIDがある場合は、配列の代わりにassignedApplicationsをマップのようなデータ構造にすると、IDで特定の行に簡単にアクセスして値を変更できます。ない場合は、変更ごとに配列全体を検索し、それに適応する必要があります。

mergeInNewData(newData) { 
    for (let i = 0; i < newData.length; i++) { 
     let changedData = newData[i]; 
     for (let j = 0; j < this.assignedApplications.length; j++) { 
      if (this.assignedApplications[j].party_id === changedData.party_id) { 
       this.assignedApplications[j].num = changedData.num; 
      } 
     } 
    } 
} 

をすべて一緒に、例は次のようになります。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://unpkg.com/vue"></script> 
 
</head> 
 
<body> 
 
    <div id="app"> 
 
    \t <table> 
 
\t \t \t <tr> 
 
\t \t \t \t <th class="column-1">Contact Id</th> 
 
\t \t \t \t <th class="column-2">Applications assigned count</th>  
 
\t \t \t </tr> 
 
\t \t \t <tr v-for="a in assignedApplications"> 
 
\t \t \t \t <td>{{a.party_id}}</td> 
 
\t \t \t \t <td>{{a.num}}</td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t <a href="#" v-on:click.prevent="update">Update</a> 
 
\t </div> 
 

 
    <script> 
 
    var app = new Vue({ 
 
     el: '#app', 
 
     data: { 
 
     assignedApplications: [ 
 
     \t { party_id: 1, num: 247 }, 
 
     \t { party_id: 2, num: 0 }, 
 
     \t { party_id: 3, num: 44 }, 
 
     \t { party_id: 4, num: 76 }, 
 
     \t { party_id: 5, num: 9 }, 
 
     ] 
 
     }, 
 
     methods: { 
 
     \t update: function() { 
 
     \t \t let newData = [ 
 
     \t \t \t { party_id: 1, num: 243}, 
 
     \t \t \t { party_id: 2, num: 80}, 
 
     \t \t \t { party_id: 4, num: 0}, 
 
     \t \t ]; 
 
     \t \t this.mergeInNewData(newData); 
 
     \t }, 
 
     \t mergeInNewData(newData) { 
 
     \t \t for (let i = 0; i < newData.length; i++) { 
 
     \t \t \t let changedData = newData[i]; 
 
     \t \t \t for (let j = 0; j < this.assignedApplications.length; j++) { 
 
     \t \t \t \t if (this.assignedApplications[j].party_id === changedData.party_id) { 
 
     \t \t \t \t \t this.assignedApplications[j].num = changedData.num; 
 
     \t \t \t \t } 
 
     \t \t \t } 
 
     \t \t } 
 
     \t } 
 
     } 
 
    }) 
 
    </script> 
 
</body> 
 
</html>