2017-10-21 56 views
1

Je veux mettre une simple case à cocher buefy dans une page de connexion mais elle ne montre pas (il montre juste le texte "Remember me") .Je veux utiliser buefy avec Laravel, et bulma bien sûr. J'essaie déjà de changer les versions mais ça ne marche pas. page de connexion:Buefy ne fonctionne pas

@extends('layouts.app') 

@section('content') 

<div id="app"> 

<div class="columns m-t-75"> 
    <div class="column is-one-third is-offset-one-third"> 
     <div class="card"> 
      <div class="card-header-title"> 
       <h1 class="title" style="font-weight: 100">Log in</h1> 
      </div> 

      <div class="card-content"> 
       <div class="field"> 
        <label for="email" class="label">Email Adress</label> 
        <div class="control"> 
         <input type="email" class="input" name="email" id="email"> 
        </div> 
       </div> 
       <div class="field"> 
        <label for="email" class="label">Password</label> 
        <div class="control"> 
         <input type="password" class="input" name="password" id="password"> 
        </div> 
       </div> 

       <b-checkbox name="remember">Remember me</b-checkbox> 

       <button class="button is-success is-outlined is-fullwidth">Log in</button> 
      </div> 
     </div> 
    </div> 
</div> 

</div> 

@endsection 

Pied de page

<!-- Scripts --> 
    <script src="{{ asset('/js/app.js') }}"></script> 
    </body> 
    </html> 

app.js

require('./bootstrap'); 

window.Vue = require('vue'); 
import Buefy from 'buefy' 

Vue.use(Buefy); 

package.json

"devDependencies": { 
    "axios": "^0.16.2", 
    "buefy": "^0.5.3", 
    "bulma": "^0.5.3", 
    "cross-env": "^5.0.1", 
    "jquery": "^3.1.1", 
    "laravel-mix": "^1.0", 
    "lodash": "^4.17.4", 
    "vue": "^2.1.10" 
}, 
"dependencies": { 
    "font-awesome": "^4.7.0" 
} 

Répondre

2

Vous devez avoir à lier votre #ap p div comme après

require('./bootstrap') 
window.Vue = require('vue') 
import Buefy from 'buefy' 
Vue.use(Buefy) 

//Must have to bind this to work with VUE js 
const app = new Vue({ 
el: '#app' 
}); 

Vous avez de savoir que Buefy utilise Vue js. Et dans Vue, il faut que tout le document soit enveloppé.

Vous devez créer une nouvelle instance vue avec enroulant la div #app.

+0

J'ai un problème similaire. J'ai suivi votre suggestion ici, mais je ne peux toujours pas obtenir la case à cocher pour afficher –

+0

Si la case à cocher n'est pas là, cela signifie que dans ce fichier Vue js n'a pas inclus. Vous pouvez installer Extension des outils Vue Dev et vérifier si vue est installée ou non sur cette page en premier. –

+1

J'ai installé l'outil Vue Dev et la vue est activée sur la page. Cependant quand je vais au panneau de vue je ne vois aucun composant énuméré à part le composant de racine –

0

Ajouter un composant vue à app.js. par exemple:

require('./bootstrap'); 

window.Vue = require('vue'); 
import Buefy from 'buefy'; 

Vue.use('Buefy'); 

Vue.component(Buefy.Checkbox.name, Buefy.Checkbox); 
var app = new Vue({ 
    el: '#app', 
    data: { 
    } 
});