Question

我正在学习Laravel 5.2和vue.js，并且不熟悉语法，问题是：

如何获取下面表单元素的所有值，并使用vue.js将它们发送给控制器？
包括文本，选择，文本区域，文件输入，无线电，复选框。

PS：
html演示中有一个插件，它的功能是压缩选定的图像。 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>

Answer 1

关于它是否真的是Laravel，我有点不确定 - ＆gt; Vue设置你正在寻找，因为你的问题中绝对没有Laravel或Vue代码，这是非常广泛的，但这是一个基本的入门模板。我几乎在每个项目中使用以下内容。

<强> Laravel

创建路线 - routes / web.php：

Route::post('/myform', 'FormControntroller@submitForm');

创建您的控制器和方法 - app / http / controllers / FormController.php

class FormController extends App\Controllers\Controller {

    public function submitForm()
    {
         var_dump(request->all());
    }
}

创建您的输入视图 - 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 from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'

import Root from './components/Root.vue'


Vue.use(Router)
Vue.use(Resource)

var router = new Router({
   history: true,
});

router.map({
  '/': {
    component: Root
  },
});

// Start up our app
router.start(Root, '#app');

创建根组件 - 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, my form was posted!');
          });
      }
   }
}
</script>

此时您需要在资产上运行网络包，请参阅Laravel Documentation上的Elixir。

同样，在没有提供太多背景知识的情况下，您已经提出了一个非常广泛的问题，但这会让您前进。

注意：以上代码在Vue 1.X上运行代码，版本2略有不同。

有关Vue和Laravel的进一步帮助，请参阅Laravel Documentation。

如何获取几个表单元素的值并使用vue.js将它们发送到控制器？

1 个答案: