Динамически добавлять строки в таблицу с помощью vue.js - PullRequest
Новая
       2

Динамически добавлять строки в таблицу с помощью vue.js

0 голосов
/ 06 сентября 2018

Я изучаю vue.js и создал базовую форму в HTML и CSS: 

<!DOCTYPE HTML>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>                       
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
<div id="app">
<div class="col-xs-5" id="mail_div">
    <label for="mail">Mail:</label>
    <input v-model="mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
</div>
<div class="col-xs-5" id="date_div">
    <label for="date">Date:</label>
    <div class='input-group date' id='datetimepicker1'>
    <input v-model="date" placeholder="Pick a date:" type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
</div>
<div class="col-xs-5" id="adress_div">
    <label for="adress">Adress:</label>
    <input v-model="adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div> 
<div class="col-xs-5" id="company_div">
    <label for="company">Company:</label>
    <input v-model="company" placeholder="Company name:"type='text' class="form-control" id="company">
</div> 
<div class="col-xs-5" id="fliers_div">
    <label for="fliers">Number:</label>
    <input v-model="fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">   
</div>    
<div id="table">
<table class="table">
    <thead>
        <th scope="col">Mail</th>
        <th scope="col">Date</th>
        <th scope="col">Adress</th>
        <th scope="col">Company</th>
        <th scope="col">Number</th>
    </thead>
    <tbody>
        <tr>
          <th scope="row">{{ mail }}</th>
          <td>{{ date }}</td>
          <td>{{ adress }}</td>
          <td>{{ company }}</td>
          <td>{{ fliers }}</td>
        </tr>
    </tbody>
</table>
</div>
<div id="button">
    <div id="button_container_1">
        <button type="button" class="btn btn-primary">Add a row</button>
    </div>
    <div id="button_container_2">
        <button type="button" class="btn btn-success">Download</button>
    </div>
</div>
</div>


<script src="https://dl.dropboxusercontent.com/s/3cml0fff7nbfpot/script.js"></script>
<script type="text/javascript">

    $(function () {
        $('#datetimepicker1').datetimepicker({locale:'pl'});
    });

</script>
</body>

А вот и мой файл .js, который пока мало что делает: 

var app = new Vue({
 el: '#app',
 data: {
  mail:'',
  date:'',
  adress:'',
  company:'',
  fliers:''
}
})

Этот код обновляет строку таблицы динамически, когда я отправляю данные. Эффект, которого я хочу достичь, должен позволить мне вводить данные для большего количества строк после нажатия синей кнопки. Как это сделать с помощью vue.js? Я нашел несколько руководств по динамическим таблицам в vue.js, но я не смог найти простых для понимания решений для моего случая.

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Основными вещами, которые нужно использовать, будут раздел методов при создании объекта Vue, добавление v-for и действие @click для кнопки. 

<!DOCTYPE HTML>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>                       
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/pl.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/ggg4zmxzjgz4i9b/style.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
</head>
<body>
    <div id="app">
        <div class="col-xs-5" id="mail_div">
            <label for="mail">Mail:</label>
            <input v-model="current.mail" placeholder="E-mail adress:" type="text" class="form-control" id="mail">
        </div>
    <div class="col-xs-5" id="date_div">
    <label for="date">Date:</label>
    <div class='input-group date' id='datetimepicker1'>
        <input v-model="current.date" placeholder="Pick a date:" type='text' class="form-control" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>
</div>
<div class="col-xs-5" id="adress_div">
    <label for="adress">Adress:</label>
    <input v-model="current.adress" placeholder="Adress of the point:"type='text' class="form-control" id="adress">
</div> 
<div class="col-xs-5" id="company_div">
    <label for="company">Company:</label>
    <input v-model="current.company" placeholder="Company name:"type='text' class="form-control" id="company">
</div> 
<div class="col-xs-5" id="fliers_div">
    <label for="fliers">Number:</label>
    <input v-model="current.fliers" placeholder="Write the number:" type='number' class="form-control" id="fliers">   
</div>    
<div id="table">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Mail</th>
                <th scope="col">Date</th>
                <th scope="col">Adress</th>
                <th scope="col">Company</th>
                <th scope="col">Number</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="el in arr">
                <td>{{ el.mail }}</td>
                <td>{{ el.date }}</td>
                <td>{{ el.adress }}</td>
                <td>{{ el.company }}</td>
                <td>{{ el.fliers }}</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="button">
    <div id="button_container_1">
        <button type="button" class="btn btn-primary" @click="addCurrent">Add a row</button>
    </div>
    <div id="button_container_2">
        <button type="button" class="btn btn-success">Download</button>
    </div>
</div>
</div>


<script type="text/javascript">var app = new Vue({
  el: '#app',
  data: {
    current:{mail: '',
    date: '',
    adress:'',
    company:'',
    fliers:''},
    arr:[]
  },
  methods: {
    addCurrent() {
        this.arr.push(JSON.parse(JSON.stringify(this.current)));
    }
  }
})</script>
<script type="text/javascript">

    $(function () {
        $('#datetimepicker1').datetimepicker({locale:'pl'});
    });

</script>
</body>
0 голосов
/ 06 сентября 2018

Вы должны внести следующие изменения:

  1. Объявление массива в свойстве data (назовем его rowData)

  2. Объявите метод в methods: (давайте назовем его addItem)

  3. Внутри метода заполните объект javascript из атрибутов. (почта, дата, адрес)

  4. Вставьте объект в массив rowData и очистите атрибуты модели 
var app = new Vue({
  el: '#app',
  data: {
    mail:'',
    date:'',
    adress:'',
    company:'',
    fliers:'',
    rowData:[] //the declared array
  },
  methods:{
    addItem(){
      var my_object = {
        mail:this.mail,
        date:this.date,
        adress:this.adress,
        company: this.company,
        fliers: this.fliers
      };
      this.rowData.push(my_object)

      this.mail = '';
      this.date = '';
      this.adress = '';
      this.company = '';
      this.fliers = '';
    }
  }
})
  1. Затем обновите ваш HTML следующим образом: 
<tr v-for="item in rowData" >
  <th scope="row">{{ item.mail }}</th>
  <td>{{ item.date }}</td>
  <td>{{ item.adress }}</td>
  <td>{{ item.company }}</td>
  <td>{{ item.fliers }}</td>
</tr>

Каждый раз, когда вы помещаете новый объект в массив rowData, VueJs автоматически обнаруживает и отображает новую строку в таблице.

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

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

...