Buefy ne fonctionne pas

Question

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:

@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" 
} 

Answer 1

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.

Answer 2

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: { 
    } 
});