title: How to edit and update form input values in vue.js?
body: <p>I am getting up the details in a form for a hotel entry with basic details and viewing it in <code>Room.vue</code>. The created values were displayed here but here i need to give <code>edit</code> option for the filled details. When i click the edit, the page should redirect to <code>RoomsEdit.vue</code> and i should get the filled up contents in that page with form inputs. For that i have tried the following codes but nothing solves my issue.. Kindly have a go through and help me in solving the issue.</p>
  
  <p>Room.vue:</p>
  
  <pre><code>&lt;table class="table table-striped table-hover rooms-table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;td&gt;Title&lt;i class="fa fa-sort"&gt;&lt;/i&gt;&lt;/td&gt;
                  &lt;td&gt;Sub Title&lt;i class="fa fa-sort"&gt;&lt;/i&gt;&lt;/td&gt;
                  &lt;td&gt; Edit &lt;/td&gt; 
                  &lt;td&gt; Delete &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
                &lt;tr v-for="room in items"&gt;
                  &lt;td&gt;{{ room.title }}&lt;/td&gt;
                  &lt;td&gt;{{ room.subtitle }}&lt;/td&gt;
                  &lt;td&gt;
                    &lt;router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id"&gt;Edit&lt;/router-link&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                    &lt;button class="btn btn-primary" v-on:click="deleteRoom(room)"&gt;Delete&lt;/button&gt;
                  &lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
  </code></pre>
  
  <p>Here i am giving edit option and making a redirect to edit page..</p>
  
  <p>Script of Rooms.vue:</p>
  
  <pre><code>&lt;script&gt;
  
  import config from '../../../config';
  
  export default {
    data(){
      return{
        items: [],
        itemsData:{
          title : '',
          subtitle : '',
        }
      }
    },
  
    methods: {
      deleteRoom: function (room) {
        var index = this.items.indexOf(room);
        this.items.splice(index, 1);
      }
    },
  
    mounted() {
      axios.get(config.apiDomain+'/Rooms').then((response)=&gt;this.items = response.data);
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>RoomsEdit.vue:</p>
  
  <pre><code>  &lt;form @submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="title" class="col-sm-2 control-label"&gt;Title&lt;span class="red"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="title" class="form-control" id="title" v-model="itemsData.title"&gt;
                      &lt;span class="text-danger"&gt;{{ errors.title?errors.title[0]:"" }}&lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="subtitle" class="col-sm-2 control-label"&gt;Subtitle&lt;span class="red"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle"&gt;
                      &lt;span class="text-danger"&gt;{{ errors.subtitle?errors.subtitle[0]:"" }}&lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Script of RoomsEdit:</p>
  
  <pre><code>&lt;script&gt;
  import config from '../../../config';
  export default {
    data(){
      return{
        items: [],
        itemsData:{
          title : '',
          subtitle : '',
        },
  
        errors: {
  
        }
      }
    },
  
    methods:{
  
      fetchRoom(id){
        axios.get(config.apiDomain+'/Rooms').then((response)=&gt;this.items = response.data);
      },
  
      updateItems(e){
        axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=&gt;{
          this.this.itemsData = "";
          this.$router.push('/admin/rooms');
        }).catch(error=&gt;{
          this.errors = error.response.data;
        });
      }
    },
    created: function() {
      this.fetchRoom(this.$route.params.id);
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>RoomsCreate.vue:</p>
  
  <pre><code>&lt;form @submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data"&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="title" class="col-sm-2 control-label"&gt;Title&lt;span class="red"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="title" class="form-control" id="title" v-model="itemsData.title"&gt;
                      &lt;span class="text-danger"&gt;{{ errors.title?errors.title[0]:"" }}&lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                    &lt;label for="subtitle" class="col-sm-2 control-label"&gt;Subtitle&lt;span class="red"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;div class="col-sm-6"&gt;
                      &lt;input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle"&gt;
                      &lt;span class="text-danger"&gt;{{ errors.subtitle?errors.subtitle[0]:"" }}&lt;/span&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Script of RoomsCreate.vue:</p>
  
  <pre><code>&lt;script&gt;
  import config from '../../../config';
  export default {
    data(){
      return{
        items: [],
        itemsData:{
          title : '',
          subtitle : '',
        },
  
        errors: {
  
        }
      }
    },
  
    methods:{
  
      addItems(){
        axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=&gt;{
          this.this.itemsData = "";
          this.$router.push('/admin/rooms');
        }).catch(error=&gt;{
          this.errors = error.response.data;
        });
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue i am facing is when i click the edit in <code>Room.vue</code>, it redirects to the <code>RoomsEdit.vue</code> where i am not getting the values that was already created, i need to get those value when i go to <code>RoomsEdit.vue</code> there i should edit and update the content.</p>