laravel - How to get values of several form elements and send them to controller with vue.js? -
i learning laravel 5.2 , vue.js,and not familiar grammars,the question is:
how of values of form elements below , send them controller vue.js?
including text,select,textarea,file input,radios,checkboxes.
ps:
there plugin in html demo,it's function compressing selected image. lrz.bundle.js,https://github.com/think2011/localresizeimg
html demo:
<!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>
i've little bit of uncertainty whether or not it's laravel -> vue setup you're looking since have absolutely no laravel nor vue code in question extremely broad, here's basic template started. use following in pretty every project.
laravel
create route - routes/web.php:
route::post('/myform', 'formcontrontroller@submitform'); create controller , method - app/http/controllers/formcontroller.php
class formcontroller extends app\controllers\controller { public function submitform() { var_dump(request->all()); } } create entry view - resources/views/app.blade.php
<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> vue
main.js
import vue 'vue' import resource 'vue-resource' import router 'vue-router' import root './components/root.vue' vue.use(router) vue.use(resource) var router = new router({ history: true, }); router.map({ '/': { component: root }, }); // start our app router.start(root, '#app'); create root component - resources/views/assets/js/components/root.vue
<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, form posted!'); }); } } } </script> at point you'll need run webpack on assets, see laravel documentation on elixir.
again, you've asked broad question without providing background, going.
notes: above code working code on vue 1.x, version 2 different.
for further on vue , laravel, see laravel documentation.
Comments
Post a Comment