Перемещение значений из одной таблицы в другую - PullRequest
Новая
       3

Перемещение значений из одной таблицы в другую

0 голосов
/ 03 февраля 2020

Я отображаю свои данные из mysql в таблицу, используя пружину, топор ios и vue Js. Когда я щелкаю данные в строке таблицы, я могу предупредить данные. То, что я хочу, - когда я щелкаю данные, они должны появиться или перемещаться в другую другую таблицу или список на той же странице. Как я могу go об этом. Вот мой код: 

<table id="myTable" class="display table" width="100%">
  <thead>
    <tr>
      <th>Account Type</th>
      <th>Amount</th>
      <th>Date</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="account in accounts">
      <td>{{account.account_type}}</td>
      <td>{{account.amount}}</td>
      <td>{{account.date}}</td>
      <td>{{account.description}}</td>
      <td><Button v-on:click.prevent="getRowData(account)">Add To List</Button></td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var appVM = new Vue({
        el: '#app',
        data: {
          id: '',
          account_type: '',
          amount: '',
          date: '',
          description: '',
          accounts: Array(),
          rowData: {}

        },
        created: function() {
          this.getAccounts();
        },
        getRowData: function(account) {
          axios.get("/account/" + account.id, ).then(function(response) {
            this.rowData = response.data;
            alert(JSON.stringify(this.rowData))
          }.bind(this))
        }
</script>

1 Ответ

1 голос
/ 03 февраля 2020

Чтобы снова отобразить данные вне таблицы, вы можете просто отобразить rowData (я не знаю структуру): 

<div v-if="rowData">
  <div> {{rowData.accountId}} </div>
  <div> {{rowData.whatever}} </div>
</div>

Если вы хотите показать список строк, по которым щелкнули: 1) объявить в 

data: {
...
clickedAccounts: Array()
}

2) pu sh новые элементы, когда вы предупредите об этом: clickedAccounts.pu sh (this.rowData)

3) Показать его в таблица или что-то в этом роде 

<div v-for="clickedAccount in clickedAccounts">
  <div> {{clickedAccount.accountId}} </div>
  <div> {{clickedAccount.whatever}} </div>
</div>

4) И, может быть, самое важное: подумайте, найдите и попробуйте :))

...