title: VueJS Edit data from table in new page
body: <p>I have 3 Pages 
  1- List for all data in a table
  2- Add page where i can add data ( but for now i am using dummy data inside my code)
  3- Edit page where it suppose to be same design as Add page, As i edit the same data
  -- i have been searching for over week how to when i press edit it send me to edit page with data like (name , etc...) and insert them inside edit page form</p>
  
  <p>THIS IS MY CODE FOR LIST DATA</p>
  
  <pre><code>&lt;template&gt;
    &lt;el-table 
      :data="tableData"
      :default-sort = "{prop: 'CN', order: 'ascending'}"
      style="width: 100%"&gt;
      &lt;el-table-column
        label="Class Name"
         prop="CN"
        sortable
        width="180"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;span style="margin-left: 10px"&gt;{{ scope.row.CN }}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column
        label="Class Minimum Visits"
        width="180"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;span style="margin-left: 10px"&gt;{{ scope.row.NCV }}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column
        label="Class Maximum Visits"
        width="180"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;span style="margin-left: 10px"&gt;{{ scope.row.MCV }}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column
        label="Difference Valid Days"
        width="180"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;span style="margin-left: 10px"&gt;{{ scope.row.DVD }}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/el-table-column&gt;
      &lt;el-table-column
        label="Class Type"
        width="180"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;span style="margin-left: 10px"&gt;{{ scope.row.CT }}&lt;/span&gt;
        &lt;/template&gt;
      &lt;/el-table-column&gt;
  
  
      &lt;el-table-column
        label="Operations"&gt;
        &lt;template slot-scope="scope"&gt;
          &lt;el-button :plain="true"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"&gt;Edit&lt;/el-button&gt;
  
  
          &lt;el-button :plain="true"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)" &gt;Delete&lt;/el-button&gt;
  
        &lt;/template&gt;
      &lt;/el-table-column&gt;
    &lt;/el-table&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      data() {
        return {
          visible2: false,
          tableData: [{
            CN: 'A+',
            // NCV:'2',
            MCV:'4',
            DVD: '-1',
            CT:'PM'
  
          }, {
           CN: 'A',
            NCV:'1',
            MCV:'3',
            DVD: '-1',
            CT:'AM'
          }, {
            CN: 'B',
            NCV:'4',
            MCV:'6',
            DVD: '-1',
            CT:'PH'
          }, {
            CN: 'C',
            NCV:'1',
            MCV:'3',
            DVD: '-1',
            CT:'PH'
          }]
        }
      },
      methods: {
  
        handleEdit(CN, row) {
      this.$router.push({name:'EditClass' ,params: {CN: this.CN}})
        },
        handleDelete(index, row) {
          this.$message({
            message: 'Class ' +' '+  row.CN +' '+' Deleted Successfully',
            type: 'success'
          });
          this.tableData.splice(row,1);
        },
        editClass(editClass) {
      this.$router.push({name:'EditClass'})
          }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>in the route i pass CN like this:</p>
  
  <pre><code>path: '/EditClass/:CN',
              name: 'EditClass',
              component: EditClass,
  </code></pre>
  
  <p>in the Edit page </p>
  
  <pre><code>&lt;template&gt;
      &lt;!-- Contact Section start --&gt;
      &lt;el-form ref="form" label-position="top" :model="ListClass" label-width="200px" class="editClass"&gt;
              &lt;el-col&gt;
                  &lt;el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p" &gt;
                      &lt;el-form-item label="Edit Class"&gt;
                          &lt;el-input  placeholder="Class Name" value="ListClass.CN"/&gt;
                      &lt;/el-form-item&gt;
                  &lt;/el-col&gt;
              &lt;/el-col&gt;
              &lt;el-col&gt;
                  &lt;el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p"&gt;
                      &lt;el-form-item label="Minimum Calls Per Cycle"&gt;
                          &lt;el-input  placeholder="MinCalls" type="number" value="ListClass.NCV"/&gt;
                      &lt;/el-form-item&gt;
                  &lt;/el-col&gt;
              &lt;/el-col&gt;
              &lt;el-col&gt;
                  &lt;el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p"&gt;
                      &lt;el-form-item label="Maximum Calls Per Cycle"&gt;
                          &lt;el-input  placeholder="MaxCalls" type="number" value="ListClass.MCV"/&gt;
                      &lt;/el-form-item&gt;
                  &lt;/el-col&gt;
              &lt;/el-col&gt;
              &lt;el-col&gt;
                  &lt;el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p"&gt;
                      &lt;el-form-item label="Visit Valid Difference Days"&gt;
                          &lt;el-input  placeholder="VisitValidDiffDays" type="number" value="ListClass.DVD"/&gt;
                      &lt;/el-form-item&gt;
                  &lt;/el-col&gt;
              &lt;/el-col&gt;
              &lt;el-col&gt;
                  &lt;el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p"&gt;
                      &lt;el-form-item label="Type"&gt;
                 &lt;el-select style="width:100%" placeholder="Select Type"&gt;
                          &lt;el-option&gt;
                          &lt;/el-option&gt;
                      &lt;/el-select&gt;                
                  &lt;/el-form-item&gt;
                  &lt;/el-col&gt;
  
              &lt;/el-col&gt;
                  &lt;el-col class="col-p"&gt;
                  &lt;el-form-item&gt;
                      &lt;button type="button" @click="onSubmit()"&gt;Edit&lt;/button&gt;
                  &lt;/el-form-item&gt;
              &lt;/el-col&gt;
                  &lt;/el-form&gt;
  
  
      &lt;!-- Contact Section End --&gt;
  &lt;/template&gt;
  &lt;script&gt;
   export default{
    name:'EditClass',
    data(){
     return{
     }
    }
  
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>My experience with Vue is too small...</p>