は、ユーザーがVueJSアプリケーションでテーブル

Question

に追加されたデータIがbuttonとtableを持っているを取得します。

すべてのテーブルの行には4つのセルを有し：私はテキストと任意のcellを投入し、これが最終的な結果になるように、私は、そのうちの一つの内側selectを追加します。いくつかの時点で

<tr> 
<td>text 1</td> 
<td>text 2</td> 
<td>text 3</td> 
<td><select><option ...>...</option>...</select></td> 
</tr> 

ユーザー（彼このテーブルの項目の追加/削除が完了しました）は、ボタンをクリックしてのテーブルにあるのデータをサーバに送信する必要があります。

したがって、ユーザーが選択したテキストノードとさまざまなオプションの内容を取得する必要があります（または、わからない、行の現在のコンテンツのどこかに何かが格納されている）。

したがって、Vueを使用して、ユーザーが送信する必要があるすべてのデータを取得するにはどうすればよいですか？ （私は現在、配列の中にObjectという行の内容を格納していますが、ユーザーが選択したオプションを格納する方法を理解することはできません）

Answer 1

入力内容と保存されたデータ。私は通常、placholderを使ってこのトリックを行います。だから、何か、この場合は配列を送る必要があるとき、私はすぐにそれを取得することができます。

const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    placeholder: { 
 
     prop1: '', 
 
     prop2: '', 
 
     prop3: '', 
 
     prop4: '' 
 
    }, 
 
    items: [ 
 
     { 
 
     prop1: 'A', 
 
     prop2: 'B', 
 
     prop3: 'C', 
 
     prop4: 'Yes' 
 
     }, 
 
     { 
 
     prop1: 'D', 
 
     prop2: 'E', 
 
     prop3: 'F', 
 
     prop4: 'No' 
 
     }, 
 
     { 
 
     prop1: 'G', 
 
     prop2: 'H', 
 
     prop3: 'I', 
 
     prop4: 'Yes' 
 
     } 
 
    ] 
 
    }, 
 
    methods: { 
 
    addItem() { 
 
     this.items.push(this.placeholder) 
 
     this.placeholder = { 
 
     prop1: '', 
 
     prop2: '', 
 
     prop3: '', 
 
     prop4: '' 
 
     } 
 
    }, 
 
    sendResult() { console.log(this.items) } 
 
    } 
 
})

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <th>Text 1</th> 
 
     <th>Text 2</th> 
 
     <th>Text 3</th> 
 
     <th>Selection</th> 
 
     </tr> 
 
     <tr v-for="item in items"> 
 
     <td>{{item.prop1}}</td> 
 
     <td>{{item.prop2}}</td> 
 
     <td>{{item.prop3}}</td> 
 
     <td> 
 
      <select v-model="item.prop4"> 
 
      <option disabled value="">Please select one</option> 
 
      <option>Yes</option> 
 
      <option>No</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td><input type="text" v-model="placeholder.prop1" /></td> 
 
     <td><input type="text" v-model="placeholder.prop2" /></td> 
 
     <td><input type="text" v-model="placeholder.prop3" /></td> 
 
     <td> 
 
      <select v-model="placeholder.prop4"> 
 
      <option disabled value="">Please select one</option> 
 
      <option>Yes</option> 
 
      <option>No</option> 
 
      </select> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <button v-on:click="addItem()">Add Item</button> 
 
    <button v-on:click="sendResult()">Send Result</button> 
 
    </div> 
 
</div>