Как взять данные таблицы, обновленные с помощью Vue. js - PullRequest
Новая
       8

Как взять данные таблицы, обновленные с помощью Vue. js

0 голосов
/ 27 марта 2020

У меня есть экземпляр vue. js, который управляет DOM электронного приложения. Мне нужно обновить интерфейс приложения, теперь приложение выполняет некоторые вычисления и затем отображает результат. Кнопка «Сохранить» даст команду приложению сохранить введенную информацию и результат вычислений. У меня проблемы с обновлением DOM. После того, как я нажму кнопку «Сохранить», мне нужно, чтобы таблица, отображающая данные, изменила sh, чтобы показать новую добавленную строку и отобразить данные на графике. Для диаграммы, которую я еще не реализовал, мне нужна помощь в том, как отформатировать набор данных, в остальном таблица пока не будет refre sh.

Я использую Dex ie . js и у меня есть диаграмма. js как зависимость проекта. 

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';" />

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script>
      window.jQuery = window.$ = require('jquery');
    </script>
    <!-- <script src="node_modules/jquery/dist/jquery.js"></script> -->
    <script src="node_modules/popper.js/dist/umd/popper.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>

  </head>
  <body>
    <div class="container mb-4 mt-4" id="app">
      <div class="row">

        <div class="col-6 p-3">
          <form>
            <div class="form-row">
              <div class="col-7">
                <label>Data:</label>
                <p>{{ date }}</p>
                <small></small>
              </div>
              <div class="col-6">
                <label>Saldo iniziale:</label>
                <input type="" class="form-control" name="" v-model="start_balance" />
                <small></small>
              </div>
              <div class="col-6">
                <label>Saldo chiusura:</label>
                <input type="" class="form-control" name="" v-model="end_balance" />
                <small></small>
              </div>
              <div class="col-12">
                <a class="btn btn-link fint-weight-bold text-black p-0 mt-4" v-on:click="saveTradingHistory()">Salva</a>
                <small></small>
              </div>
            </div>
          </form>
        </div>

        <div class="col-6 p-3">
          <label>Profitto Giornata:</label>
            <p v-bind:class="{'text-success': positive, 'text-danger': negative }">{{ total }}</p>
          <label>Profitto Totale: </label>
          <p class="text-warning">{{ totalBalance }}</p>
        </div>

        <div class="col-12 p-3">
          <table class="table table-sm table-bordered table-hover">
            <thead>
              <tr>
                <th scope="col">Data</th>
                <th scope="col">Saldo iniziale</th>
                <th scope="col">Saldo chiusura</th>
                <th scope="col">Differenza</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="data in history">
                <th scope="row">{{ data.date }}</th>
                <td>{{ data.start_balance }}</td>
                <td>{{ data.end_balance }}</td>
                <td>{{ data.difference }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="col-12 p-3">
          <canvas id="tradingChart" width="400" height="400"></canvas>
        </div>

      </div>
    </div>

    <script>
      const Electron = require('electron');
      const Dexie = require('dexie');
      const Chart = require('chart.js');

      // var ctx = document.getElementById('tradingChart');
      // let tradingChart = new Chart(ctx, {
      //   type: 'line',
      //
      // });
      let db = new Dexie('trading_balance');

      db.version(1).stores({
        trading_history: "++id,date,start_balance,end_balance,difference"
      });

      let app = new Vue({
        el: '#app',
        data: {
          date: new Date().toLocaleDateString('it-IT'),
            start_balance: null,
            end_balance: null,
          positive: null,
          negative:  null,
          result: 0,
          history: [],
          balance: null
        },
        created: function(){
          this.viewTradingHistory();
        },
        computed: {
                total: function(){
                    this.result = parseFloat(this.end_balance) - parseFloat(this.start_balance);
                if( this.result < 0 ){
                  this.negative = true;
                  this.positive = false;
                }
                if( this.result > 0 ){
                  this.negative = false;
                  this.positive = true;
                }
                return this.result;
                },
            totalBalance: function(){
              return parseFloat(this.balance);
            }
            },
          methods: {
            saveTradingHistory: function(){
              db.trading_history.add({
                date: this.date,
                start_balance: this.start_balance,
                end_balance: this.end_balance,
                difference: this.result
              }).then( (primKey) => {
                // console.log(primKey);
                // console.log(db.trading_history.get(primKey));
              });
            },
            viewTradingHistory: function(){
              db.trading_history.each( (item) =>{
                this.balance += item.difference;
                this.history.push({...item});
              });
              //console.log(this.history);
            },
          }
        });
    </script>
  </body>
</html>

1 Ответ

1 голос
/ 28 марта 2020

Чтобы сделать значение или объект реактивным в Vue, его необходимо правильно инициализировать, обычно это либо свойство prop, data, либо значение computed.

Vue не видит изменений в вашей переменной db, поскольку она не была инициализирована как одна из них.

Для массива табличных данных вы можете инициализировать его следующим образом: 

data () {
    return {
      items : [
   ['23/03/2020', 2309.99, 2332.25],
   ['24/03/2020', 2343,30, 2424.62],
   ['25/03/2020', 2424.62, 2519.56]
     ],
    }
  },

Для редактирования данных для отображения в шаблоне мы можем использовать вычисляемое свойство, которое будет обновляться в любое время this.items изменения: 

computed: {
   tableData () {
       return this.items.map(x=>{
         x.push((x[2]-x[1]).toFixed(2)) //adds difference column
         return x
       })
   },
  }

Теперь мы можем внести изменения в items с помощью метода, и он все обновит: 

methods: {
    addRow () {
      lastRow = this.items.slice(-1)[0]
        this.items.push(
          [lastRow[0] ,lastRow[2], lastRow[2] + 10]
        )
    }
  },

вот рабочий пример для таблицы: https://jsfiddle.net/ellisdod/fjqsbtv1/

для диаграммы см. Мой предыдущий ответ

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...