Laravel 如何获取多个表单元素的值并使用vue.js将它们发送到控制器？
我正在学习Laravel 5.2和vue.js，不熟悉语法，问题是： 如何获取下面表单元素的所有值并使用vue.js将它们发送到控制器？Laravel 如何获取多个表单元素的值并使用vue.js将它们发送到控制器？,laravel,Laravel,我正在学习Laravel 5.2和vue.js，不熟悉语法，问题是： 如何获取下面表单元素的所有值并使用vue.js将它们发送到控制器？ 包括文本、选择、文本区域、文件输入、收音机、复选框 附言： html演示中有一个插件，它的功能是压缩选定的图像。 lrz.bundle.js html演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <met
包括文本、选择、文本区域、文件输入、收音机、复选框 附言：
html演示中有一个插件，它的功能是压缩选定的图像。 lrz.bundle.js html演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form>
<div class="form-group row">
<label for="formGroupExampleInput" class="col-sm-2 form-control-label">Text</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
<div class="form-group row">
<label for="exampleSelect1" class="col-sm-2 form-control-label">Select</label>
<div class="col-sm-10">
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="exampleTextarea" class="col-sm-2 form-control-label">Textarea</label>
<div class="col-sm-10">
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="exampleInputFile" class="col-sm-2 form-control-label">File input</label>
<div class="col-sm-10">
<input id="exampleInputFile" name="photo" type="file" class="form-control-file" value="Upload" accept="image/*">
preview:
<img id="preview"/>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Radios</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Checkboxes</label>
<div class="col-sm-10">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Submit</button>
</div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="js/dist/lrz.bundle.js"></script>
<script>
$(function () {
var $preview = $('#preview');
$('#exampleInputFile').on('change', function () {
lrz(this.files[0], {
width: 800
}).then(function (rst) {
$preview.attr('src', rst.base64);
rst.formData.append('fileLen', rst.fileLen);
});
});
});
</script>
</body>
</html>
正文
挑选
1.
2.
3.
4.
5.
文本区域
文件输入
预览：
$（函数（）{
变量$preview=$（“#preview”）；
$（'#exampleInputFile'）。on（'change'，function（）{
lrz（此.files[0]{
宽度：800
}).then（功能（rst）{
$preview.attr（'src'，rst.base64）；
rst.formData.append（'fileLen'，rst.fileLen）；
});
});
});
Route::post('/myform', 'FormControntroller@submitForm');
class FormController extends App\Controllers\Controller {
public function submitForm()
{
var_dump(request->all());
}
}
<html>
<head>
<title>Minimal Vue Example</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.1/vue.min.js"></script>
<script src="/js/main.js"></script
</body>
</html>
<template>
<form v-on:submit.prevent="submitForm">
<input type="text" v-model="formData.username"/>
<input type="text" v-model="formData.password"/>
</form>
</template>
<script>
export default {
data: function() {
return {
formData: {
username: null,
password: null
}
}
},
methods: {
submitForm: function() {
this.$http.post('/myform', this.formData).then(function(response) {
alert('Yay, my form was posted!');
});
}
}
}
</script>
导出默认值{
数据：函数（）{
返回{
表格数据：{
用户名：null，
密码：null
}
}
},
方法：{
submitForm:function（）{
this.$http.post（'/myform'，this.formData）。然后（函数（响应）{
警惕（“耶，我的表格被贴了！”）；
});
}
}
}
<template>
<form v-on:submit.prevent="submitForm">
<input type="text" v-model="formData.username"/>
<input type="text" v-model="formData.password"/>
</form>
</template>
<script>
export default {
data: function() {
return {
formData: {
username: null,
password: null
}
}
},
methods: {
submitForm: function() {
this.$http.post('/myform', this.formData).then(function(response) {
alert('Yay, my form was posted!');
});
}
}
}
</script>