如何在vue.js中编辑和更新表单输入值？

Question

我正在以酒店条目的形式获取详细信息，其中包含基本详细信息并在Room.vue中查看。创建的值显示在此处，但在此我需要为填充的详细信息提供edit选项。当我点击编辑时，页面应该重定向到RoomsEdit.vue，我应该在页面中获得带有表单输入的填充内容。为此，我尝试了以下代码，但没有解决我的问题..请通过并帮助我解决问题。

Room.vue：

<table class="table table-striped table-hover rooms-table">
            <thead>
              <tr>
                <td>Title<i class="fa fa-sort"></i></td>
                <td>Sub Title<i class="fa fa-sort"></i></td>
                <td> Edit </td> 
                <td> Delete </td>
              </tr>
            </thead>

            <tbody>
              <tr v-for="room in items">
                <td>{{ room.title }}</td>
                <td>{{ room.subtitle }}</td>
                <td>
                  <router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id">Edit</router-link>
                </td>
                <td>
                  <button class="btn btn-primary" v-on:click="deleteRoom(room)">Delete</button>
                </td>
              </tr>
            </tbody>
          </table>

在这里，我提供编辑选项并进行重定向以编辑页面..

Rooms.vue的脚本：

<script>

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)=>this.items = response.data);
  }
}
</script>

RoomsEdit.vue：

  <form @submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data">
                <div class="form-group">
                  <label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
                  <div class="col-sm-6">
                    <input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
                    <span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
                  </div>
                </div>
                <div class="form-group">
                  <label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
                  <div class="col-sm-6">
                    <input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
                    <span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
                  </div>
                </div>
</form>

RoomsEdit的脚本：

<script>
import config from '../../../config';
export default {
  data(){
    return{
      items: [],
      itemsData:{
        title : '',
        subtitle : '',
      },

      errors: {

      }
    }
  },

  methods:{

    fetchRoom(id){
      axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
    },

    updateItems(e){
      axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=>{
        this.this.itemsData = "";
        this.$router.push('/admin/rooms');
      }).catch(error=>{
        this.errors = error.response.data;
      });
    }
  },
  created: function() {
    this.fetchRoom(this.$route.params.id);
  }
}
</script>

RoomsCreate.vue：

<form @submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data">
                <div class="form-group">
                  <label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
                  <div class="col-sm-6">
                    <input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
                    <span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
                  </div>
                </div>
                <div class="form-group">
                  <label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
                  <div class="col-sm-6">
                    <input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
                    <span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
                  </div>
                </div>

RoomsCreate.vue的脚本：

<script>
import config from '../../../config';
export default {
  data(){
    return{
      items: [],
      itemsData:{
        title : '',
        subtitle : '',
      },

      errors: {

      }
    }
  },

  methods:{

    addItems(){
      axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=>{
        this.this.itemsData = "";
        this.$router.push('/admin/rooms');
      }).catch(error=>{
        this.errors = error.response.data;
      });
  }
}
</script>

我面临的问题是，当我点击Room.vue中的编辑时，它会重定向到RoomsEdit.vue我无法获取已创建的值，我需要获取这些值，当我转到RoomsEdit.vue我应该编辑和更新内容。