Vue JS Update data after db records update

[oditha]

Vue Project ekka db recode ekak update karagen passe update una data show karaganne kohomeda?

Danata thiyea code eka

<template>
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        All Users

        <button class="btn btn-primary px-4 float-right mt-0 mb-3" @click="showModal = true">Add Author</button>

      </div>
      <div class="card-body">

        <table class="table table-striped">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="author in displayedAuthors" :key="author._id">
              <td>{{ author.name }}</td>
              <td>{{ author.email }}</td>
              <td>
                
                <button @click="editAuthor(author)" class="btn btn-primary btn-sm mr-2"><i class="cil-energy"></i>Edit</button>
                <router-link :to="{name: 'edit', params: { id: author._id }}" class="btn btn-danger btn-sm"><i class="cil-energy"></i>Delete</router-link>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="card-footer">
        <nav aria-label="Page navigation example">
          <ul class="pagination">
            <li class="page-item">
					    <button type="button" class="page-link" v-if="page != 1" @click="page--"> Previous </button>
				    </li>
            
            <li class="page-item" v-for="pageNumber in pages.slice(page-1, page+5)" v-bind:key="pageNumber"><a class="page-link" @click="page = pageNumber">{{pageNumber}}</a></li>
            
            
            <li class="page-item">
					    <button type="button" @click="page++" v-if="page < pages.length" class="page-link"> Next </button>
				    </li>
          </ul>
        </nav>
      </div>
    </div>
    <form @submit.prevent="addAuthor">
      <CModal title="Modal title" :show.sync="showModal" color="primary">

        <div class="form-group">
          <label for="exampleInputEmail1">Full Name</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            v-model="author.name">

        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            v-model="author.email">

        </div>

        <template #header>
          <h6 class="modal-title">Create Authors</h6>
          <CButtonClose @click="showModal = false" class="text-white" />
        </template>
        <template #footer>
          <CButton @click="showModal = false" color="danger">Close</CButton>
          <CButton color="primary" type="submit">Save</CButton>
        </template>
      </CModal>
    </form>

    <!--* Update Modal -->
    <form @submit.prevent="updateAuthor">
      <CModal title="Edit Author" :show.sync="editModal" color="success">

        <div class="form-group">
          <label for="exampleInputEmail1">Full Name</label>
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            v-model="author.name">
          <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            v-model="author._id">

        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
            v-model="author.email">

        </div>

        <template #header>
          <h6 class="modal-title">Edit Authors</h6>
          <CButtonClose @click="editModal = false" class="text-white" />
        </template>
        <template #footer>
          <CButton @click="editModal = false" color="danger">Close</CButton>
          <CButton color="success" type="submit">Update</CButton>
        </template>
      </CModal>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showModal: false,
        editModal: false,
        authors: [],
        author: {},
        page: 1,
        perPage: 9,
        pages: [],
      }
    },
    computed: {
      displayedAuthors() {
        return this.paginate(this.authors);
      }
    },
    watch: {
      authors() {
        this.setPages();
      }
    },
    created() {
      this.getAuthors()
    },
    filters: {
      trimWords(value) {
        return value.split(" ").splice(0, 20).join(" ") + '...';
      }
    },
    methods: {
      addAuthor() {
        let uri = 'http://localhost:4000/authors/add';
        this.axios.post(uri, this.author).then((response) => {

          console.log(response.data)
          this.showModal = false
          this.author.name = ''
          this.author.email = ''
          this.authors.push(response.data)
        });
      },
      getAuthors() {
        let uri = 'http://localhost:4000/authors';
        this.axios.get(uri).then(response => {
          this.authors = response.data;
        });
      },
      editAuthor(author){
        this.author.name = author.name;
        this.author.email = author.email;
        this.author._id = author._id;
        this.editModal = true

      },
      updateAuthor(){
        console.log(this.authors)
        let uri = `http://localhost:4000/authors/update/${this.author._id}`;
          this.axios.post(uri, this.author).then(() => {
            this.editModal = false
            
            // UPDATE TABLE HERE 

          });
      },
      setPages() {
        let numberOfPages = Math.ceil(this.authors.length / this.perPage);
        for (let index = 1; index <= numberOfPages; index++) {
          this.pages.push(index);
        }
      },
      paginate(authors) {
        let page = this.page;
        let perPage = this.perPage;
        let from = (page * perPage) - perPage;
        let to = (page * perPage);
        return authors.slice(from, to);
      }
    }
  }
</script>

[root]

aith call karanna getAuthors() ekata updateAuthor() eka athule. eka thama lesima widiya.

[oditha]

@root Wade hari. eth dan thwa issue ekk enawa. data refresh wenakota pagination eka awul wenwa.

Before Update

After Data Refresh

[root]

@oditha

image eka wada na machan

[oditha]

@root 01 - https://ibb.co/BnvwwTX
02 - https://ibb.co/kBxyffJ

[root]

@oditha
penne na machan, forum eke post upload karanna puluwan images

[oditha]

@root Danui eka dakke :confused:

Before Update

After Table update or insert new

[root]

@oditha

create karanna apahu pagination eka ethakota hari.

[oditha]

@root hariyatama therune naha machan

[root]

@oditha

Pagination ekath recall karanna. Ethakota re generate wenawa

[oditha]

@root elakiri. man try karala balannam

[oditha]

@root mehema karath same result ekamai. wenask na