如何将v-model绑定的ID值通过axios传递到Laravel控制器

传值失效是三个问题叠加导致的：

• Vue2 无法监听对象后续动态新增的属性，你在Send方法里给sms对象临时加的ids、chooseds字段不是响应式的，axios序列化请求参数时会丢失这两个字段，后端自然拿不到设备ID。
• 方法传参逻辑有冗余，你在方法定义里收了selected、choosed形参，如果模板里触发方法时没正确传值，会直接拿到undefined。
• 后端逻辑没有对设备ID做存在性校验，就算拿到ID也可能因为查不到对应设备数据，导致后续逻辑报错。

1. 调整Vue侧data定义，提前声明所有要传的字段 #

不要动态往sms对象上挂载属性，把需要提交给后端的字段提前在data里声明好，保证响应式正常：

export default {
    data() {
        return {
            search: "",
            contacts: {}, 
            devices: {}, 
            file: '',
            paginate: 5,   
            selected: [],
            choosed: null,
            select_all: false,  
            maxCount: 320,
            remainingCount: 320,
            hasError: false,  
            form: {
                first_name: null,
                last_name: null,
                mobile_number: null,
            },
            sms: {
                ids: [], // 提前声明联系人ID数组字段
                chooseds: null, // 提前声明设备ID字段
                message: null,
            },
        }
    },

2. 修正Send提交方法 #

不需要在方法调用时额外传参，直接取组件实例上v-model绑定的值即可，避免传参错位：

Send() {
    const vm = this;
    // 直接给提前声明好的sms属性赋值
    vm.sms.ids = vm.selected;
    vm.sms.chooseds = vm.choosed;
    axios.post("/api/send-sms", vm.sms)
            .then(function(response) {
                if(response.data.status == 'success'){
                    vm.getContact();
                    vm.select_all = false;
                    vm.selected = [];
                    vm.choosed = null;
                    // 提交成功后重置sms表单
                    vm.sms.ids = [];
                    vm.sms.chooseds = null;
                    vm.sms.message = null;
                    swal('Send Success!', response.data.message,'success');
                }
                else{
                    swal('Error',response.data.message,'error');  
                }
            })
            .catch(function (error) {
                console.log(error)
            });
},

注意：模板里触发方法时不要加多余参数，直接写@click="Send"即可。

3. 优化Laravel控制器逻辑 #

保留你原来的自定义错误返回格式，补全设备存在性校验，去掉重复的数据库查询：

public function sendMessage(Request $request){
    date_default_timezone_set('Asia/Manila');
    ini_set('max_execution_time', '0');

    $message = $request->input('message'); 
    $deviceId = $request->input('chooseds');
    $contactIds = $request->input('ids');
    
    if(empty($contactIds)) {
        return response()->json([
            'status' => 'error',
            'message' => 'Please Select Contact!'
        ]);
    }
    if(empty($deviceId)) {
        return response()->json([
            'status' => 'error',
            'message' => 'Please Select Device!'
        ]);
    }
    if(empty($message)) {
        return response()->json([
            'status' => 'error',
            'message' => 'Input fields are required!'
        ]);
    }

    // 校验设备是否存在，避免查不到数据导致后续报错
    $device = Device::find($deviceId);
    if(!$device){
        return response()->json([
            'status' => 'error',
            'message' => 'Selected device does not exist!'
        ]);
    }

    $device_secret = $device->device_secret;   
    $device_id = $device->device_id;   
    $time = time();
    $secretMd5 = md5($device_secret.$time);  

    foreach ($contactIds as $id) {   
        $number = Contact::where('id', $id)->value('mobile_number');
        file_get_contents("http://server_url/?to=".urlencode(trim($number))."&text=".urlencode($message)."&secret=$secretMd5&time=$time&deviceID=".$device_id);
        sleep(20);
    }

    return response()->json([
        'status' => 'success',
        'message' => 'Selected Contact Succesfully Send SMS!'
    ]);
}

改完之后可以先打开浏览器F12的网络面板，找到/api/send-sms请求，查看请求Payload里是否包含chooseds字段且值为选中的设备ID：

• 如果有值，说明前端传参正常，问题出在后端取参逻辑
• 如果没有值，检查axios全局配置，确保请求头Content-Type设置为application/json，同时确认请求没有被CSRF中间件拦截。

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