Vue JS Update data after db records update


  • Web Development

    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>
    
    

  • Linux Help

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


  • Web Development

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

    Before Update
    01

    After Data Refresh
    02


  • Linux Help

    @oditha

    image eka wada na machan


  • Web Development


  • Linux Help

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


  • Web Development

    @root Danui eka dakke 😕

    Before Update
    Screenshot_2020-01-15 CoreUI - Vue Open Source Bootstrap Admin Template.png

    After Table update or insert new

    Screenshot_2020-01-15 CoreUI - Vue Open Source Bootstrap Admin Template(1).png


  • Linux Help

    @oditha

    create karanna apahu pagination eka ethakota hari.


  • Web Development

    @root hariyatama therune naha machan


  • Linux Help

    @oditha

    Pagination ekath recall karanna. Ethakota re generate wenawa


  • Web Development

    @root elakiri. man try karala balannam


  • Web Development

    @root mehema karath same result ekamai. wenask na


Log in to reply