forteirp
3 months ago
118
3
Laravel

When logged in as a user the buefy stop working in Laravel using Vue

Posted 3 months ago by forteirp

i recently learning about Laravel using vue...

I'm using Laravel 5.8, Bulma 0.7.5, Buefy 0.8.1, and Vue

My issue is that when I'm logged-out the Buefy CSS works fines but ones I log-in, it stops working...

Here's are a few screenshots so you can see what I'm talking about...

Here's what it looks like when I'm logged-out https://imgur.com/inOTzgv

and here's what it looks like when I'm log-in https://imgur.com/Qgq52d4

Here's my app.js

require('./bootstrap');

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


var app = new Vue({
            el: '#app',
             data() {
                return {
                    auto_password:      true,
                    password_options: 'keep'
                }
            }
            });
        

and here's My cpanel.blade.php

    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'EthicallySpeaking') }}</title>

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

    <!-- Fonts 
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">-->

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @yield('styles')
</head>
<body>

    <div id="app">
          @include('inc.navbar')
          @include('inc.messages')
          @include('inc.side_navbar_cpanel')
        <div id="app" class="cpanel-dashboard-area flex-container">       
              @yield('content')
        </div>
    </div>
        @yield('scripts')
            
</body>
</html>

and here's the edit.php form that I'm having the issue with...

@extends('layouts.cpanel')

@section('content')
<section class="section">
        <div class="container">
    
            <div class="columns m-l-10">
                <div class="column is-10">
                    <h1 class="title">Edit User Profile</h1>
                </div><!-- end column is-10 -->
            </div><!-- end columns -->
   <hr/>
        <div class="columns">
                <div class="column">
            <form action="{{route('users.update', $user->id)}}" method="POST">
            {{method_field ('PUT')}}
            {{csrf_field()}}
                <div class="field">
                    <label for="name" class="label">Name</label>
                    <p class="control">
                        <input type="text" class="input" name="name" id="name" value="{{$user->name}}">
                    </p>
                </div>
                
                <div class="field">
                    <label for="email" class="label">Email</label>
                    <p class="control">
                        <input type="text" class="input" name="email" id="email" value="{{$user->email}}">
                    </p>
                </div>
                
                <div class="field">
                    <label for="password" class="label">Password</label>
                        <div class="field">
                            <b-radio v-model="password_options" native-value="keep" name="permission_type">Do Not Change Password</b-radio>
                        </div>
                        
                        <div class="field">
                            <b-radio v-model="password_options" native-value="auto" name="permission_type">Auto-Generate New Password</b-radio>
                         </div>  
                         
                         <div class="field"> 
                            <b-radio v-model="password_options" native-value="manual" name="permission_type">Manually Set New Password</b-radio>
                                <p class="control">
                                    <input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user"> 
                                </p>
                        </div>
                </div>
                
                <button class="button is-success m-t-20">Edit User</button>
                
            </form>
            </div><!-- end column is-10 -->
            </div><!-- end columns -->
            
            
       </div><!-- end container -->

</section>
@endsection

I wanted to know if anyone know why this is happing?

Please sign in or create an account to participate in this conversation.