如何使用Vue和Laravel自动填充表单字段

Question

我正在开发一个Web应用程序，如果我键入computer_number，我想在其中填充一些字段，我想填充将从staffs表中选择的staff_old_name字段。

这是我尝试过的：

模板

    <div>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Computer Number</th>
            <th>Old Name</th>
            <th>New Name</th>
            <th>Remarks</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(staff, index) in staffs">
            <td>
              <span v-if="staff.editmode"><input class="form-control" v-model="staff.computer_number"/></span>
              <span v-else>{{staff.computer_number}}</span>
            </td>
            <td>
              <span v-if="staff.editmode"><input class="form-control" v-model="staff.old_name"/></span>
              <span v-else>{{staff.old_name}}</span>
            </td>
            <td>
              <span v-if="staff.editmode"><input class="form-control" v-model="staff.new_name"/></span>
              <span v-else>{{staff.new_name}}</span>
            </td>
            <td>
              <span v-if="staff.editmode"><input class="form-control" v-model="staff.remarks"/></span>
              <span v-else>{{staff.remarks}}</span>
            </td>
            <td>
              <span v-if="!staff.editmode"><button class="btn btn-info" type="button" @click="edit(staff)">Edit</button></span>
              <span v-else><button class="btn btn-success" type="button" @click="save(staff)">Save</button></span>
              <span><button type="button" class="btn btn-danger" @click="remove(index)"><i class="fa fa-trash"></i></button></span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="box-footer">
        <button class="btn btn-info" type="button" @click="cloneLast">Add Row</button>
      </div>
    </div>

脚本

    export default {
        data() {
            return {
                staffs: [],
                data_results: []
            }


       },
       computed:{
        autoComplete(){
           this.data_results = [];
           if(this.computer_number.length > 2){
            axios.get('/api/staffs/autocomplete',{params: {computer_number: this.computer_number}}).then(response => {
               console.log(response);
             this.data_results = response.data;
            });
           }
          }
       },
       methods: {
         edit :function(obj){
           this.$set(obj, 'editmode', true);
         },
         save : function(obj){
           this.$set(obj, 'editmode', false);
         },
         remove: function(obj){
            this.staffs.splice(obj,1);
         },
         cloneLast:function(obj){
           //var lastObj = this.staffs[this.staffs.length-1];
           //lastObj = JSON.parse(JSON.stringify(lastObj));
           obj.editmode = true;
           this.staffs.push(obj);
         },

       },
       created() {
            axios.get('/staff-names')
                 .then(response => this.staffs = response.data);
        },
    }

当我键入计算机号时，我希望基于存储在人员表中的人员名称填充staff_old_name字段。