Why is the component not updating?

S

scottparker2020-06-21 15:45:15

Vue.js

scottparker, 2020-06-21 15:45:15

Good afternoon. I'm familiar with vue. but the component is not updated. A row from the table should be deleted, when you click on the word delete in the last column. The updated object is output to the console. What's wrong?
Here is the application (I hope you will open it).

html code

<!DOCTYPE html>
<html>
<head>
  <title>app.support.by</title>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  
</head>
<body>
  <div id="app">
    <table class='table table-hover'>
      <thead align='center'>
        <th>Компания</th>
        <th>Сделки</th>
        <th>Сумма сделок</th>
        <th>Действие</th>
      </thead>
      <tbody>
        <tr v-for='company in companies'>
          <td>{{company.name}}</td>
          <td>
            <span v-for='deal in company.deals'>
              {{deal}}
              <br>
            </span>
          </td>
          <td align='center'>
            {{company.sum_deals}}
          </td>
          <td  align='center' @click='removecompany(company.id)'>Удалить</td>
        </tr>
      </tbody>
      <tfoot><tr>
        <td colspan="1">Итого</td>
        <td colspan="3" align='center'>{{totalsum}}</td>
      </tr></tfoot>
    </table>
  </div>
  <script src="./script.js"></script>
</body>
</html>

javascript

var app = new Vue({
  el: '#app',
  data: {
    handler: './handler.php',
    companies: [],
    totalsum: 0,
  },
  created: function(){
    this.request();
  },
  methods: {
    request(){
      axios.get(this.handler).then((response) => {
        this.companies = response.data.companies;
        console.log(this.companies);
        this.totalsum = response.data.totalsum;
      });
    },
    removecompany(id){
      delete this.companies[id];
      console.log(this.companies);
    }
  }
})

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Dima Polos, 2020-06-21
@dimovich85

Because vue reactivity in arrays has limitations. Instead of delete, use splice.
The bottom line is that vue can track a change in the array itself (change in the link), as well as a change in the length of the array, but if the array element has been changed, and the length remains, the reactivity system will not notice. The delete operator essentially replaces the array element with undefined, and splice will cut and reduce the number of array elements, length will change and vue will notice the change, as a result - it will cause the component to be rendered.