Laravel结合Vue.js更新AccessoryRequest状态字段的问题求助

第一步：调整Vue的data定义 #

给Vue实例新增两个响应式变量，分别存储目标请求ID和选中的状态值：

data() {
    return {
        dialog: false,
        lines: [],
        // 新增两个字段
        accessoryRequestId: null,
        selectedStatus: 'Pending' // 默认值和下拉框首选项保持一致
    }
},

第二步：修改getdetails方法，给新增变量赋值 #

你提到接口返回的lines数组里包含accessory_request_id，同一请求下所有明细的request_id一致，请求成功后直接取值即可：

getdetails: function(id) {
    let self = this;
    this.lines = [];
    // 先重置变量避免旧值干扰
    this.accessoryRequestId = null;
    this.selectedStatus = 'Pending';
    axios.get('/accessory/' + id)
    .then(response => {
        this.dialog = true;
        self.lines = response.data;
        // 赋值请求ID
        if(self.lines.length > 0) {
            self.accessoryRequestId = self.lines[0].accessory_request_id;
        }
        console.log(self.lines)
    })
    .catch(function (error) {
        alert('Error');
    });
},

第三步：调整模态框内的表单元素 #

首先修复原有触发bug：表格里的Details按钮的data-target="#details"需要改成data-target="#modal-1"，和你实际定义的modal id对应，否则点击不会弹出框。
然后修改表单内容加上双向绑定：

<form ref="form" @submit.stop.prevent="handleSubmit">   
    @csrf
    <!-- 隐藏输入框绑定accessoryRequestId -->
    <input type="hidden" v-model="accessoryRequestId" name="id"/>
    <!-- 下拉框绑定selectedStatus -->
    <select class="form-control" name="status" v-model="selectedStatus">
        <option value="Pending">Pending</option>    
        <option value="Ordered">Ordered</option>    
        <option value="Received">Received</option>    
    </select>

    <br><br>
    <table class="table table-bordered">
        <tr>
            <td>Vendor</td>
            <td>Description</td>
            <td>QTY</td>
        </tr>
        <tr v-for="line in lines" :key="line.id">
            <td>@{{line.name}}</td>
            <td>@{{line.description}}</td>
            <td>@{{line.qty}}</td>
        </tr>
    </table>
</form>

第四步：修改handleSubmit方法，提交参数给后端 #

原有post请求没有携带任何参数，需要把ID和选中的状态传递给后端接口：

handleSubmit() {
    axios.post('/accessory/status-change/', {
        id: this.accessoryRequestId,
        status: this.selectedStatus
    })
    .then(response => {
        location.href = '/accessory';
    })
    .catch(function (error) {
        alert('Error');
    }); 
}

可选优化&异常处理 #

如果提交时出现419 CSRF错误，在页面<head>标签中加入：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在Vue的created钩子中加入全局axios配置：

created() 
{
    axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').content;
}

后端控制器也可以加上参数校验，避免非法请求：

public function status_change(Request $request)
{
    $request->validate([
        'id' => 'required|exists:accessory_requests,id',
        'status' => 'required|in:Pending,Ordered,Received'
    ]);
    $accessory_request = AccessoryRequest::findorfail($request->id);
    $accessory_request->status = $request->input('status');
    $accessory_request->save();
    return ['message' => 'Status Updated'];
}

内容的提问来源于stack exchange，提问作者Coder