0

我一直在尝试在我的 laravel 5.4 cms 管理面板项目中使用 vue.js ...我正在尝试使用 vue.js 创建一个复选框，这样每当用户尝试重置密码时，他们都可以选择复选框和有一个 auto_generate 密码或手动输入。通过选择 auto_generate 密码，密码输入字变得不可见。我正在使用带有引导程序的 vue，它没有响应，好像 vue 本身没有反映在项目中，因为每当我使用 b-checkbox 时，它总是空的。这是我的代码...

创建.blade.php

@extends('layouts.manage')

@section('content')
    <div class="flex-container m-t-10">
        <div class="columns m-l-10">
            <div class="row">
                <h1 class="title m-l-15">Create New Users</h1>
            </div>              
        </div>
        <hr class="m-t-0">

        <form action="{{route('users.store')}}" method="POST">
            {{csrf_field()}}

                <div class="col-lg-offset-0 col-md-12 thumbnail">
                    <div class="form-group">
                        <label for="name" class="control-label">Name:</label>                       
                        <input type="text" name="name" class="form-control" id="name" value="{{ old('name')}}" placeholder="Enter your name...">
                    </div>

                    <div class="form-group">
                        <label for="email" class="control-label">Email:</label>                     
                        <input type="text" name="email" class="form-control" id="email" value="{{ old('email')}}" placeholder="Enter your email...">
                        <small>Your email is confidential with us</small>
                    </div>

                    <div class="form-group">
                        <label for="password" class="control-label">Password:</label>                       
                        <input type="password" name="password" class="form-control" id="password" v-if="!auto_password" placeholder="Enter your password...">
                        <b-checkbox name="auto_generate" class="m-t-15" v-model="auto_password">Auto Generate Password</b-checkbox>
                    </div>                                      
                </div>
            </div>

            <div>
            <button class="btn btn-md btn-success fa fa-user-plus pull-right"> Create New User</button>         
            </div>          
        </form>

            <div>
            <a class="btn btn-warning btn-md fa fa-caret-left pull-left" href="{{route('users.index')}}"> Back</a>          
            </div>

</div>
@endsection

@section('scripts')
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        auto_password: true,
    }
    });
  </script>
@endsection

应用程序.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example', require('./components/Example.vue'));

const app = new Vue ({
    el: '#app'
});

node_modules “node_modules/bootstrap-vue/dist/bootstrap-vue”，它在我的 app.scss 文件中......也许我做得不对。应用程序.scss

// Variables
@import "variables";

// Font Awesome
@import "node_modules/font-awesome/scss/font-awesome";

// bootstrap-vue
@import "node_modules/bootstrap-vue/dist/bootstrap-vue";

// Custom SASS Pages
@import "overrides";
@import "helpers";
@import "manage/";
@import "styles";

请我会感谢我做错了什么的建议。谢谢

4

0 回答 0