bhojkamal

Member Since 1 Week Ago

Kathmandu

Experience Points
590
Total
Experience

4,410 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
1
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 1
590 XP
May
13
1 day ago
Activity icon

Started a new Conversation SyntaxError: VueCompilerError: Unnecessary Value Binding Used Alongside V-model. It Will Interfere With V-model's Behavior.

Hello, I got error on my Laravel 8 and Vue 3 application while running npm run watch. If I remove v-model on input, there is no error but when I use v-model="user.name" on input, the error comes. However, I have another form for crud operation, there is no issue with v-models in same application. The issue is only with add user form and only when I add v-model.

I've used Laravel 8, Vue 3, Bootstrap 5.

The error on mix is

SyntaxError: VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.

I have vue js as below but it is same like my another form.

export default {
  data() {
    return {
     user:{
       name:'',
       email:'',
       user_type:'',
       password:''
     },
     isSuccess: false
    }
  },

I found the solution after posting this.

The error is due to the value="" in input. When I removed value="" or v-model; It worked but I am wondering why this had caused error on mix, ?

<input type="text" name="name" v-model="user.name"
                  class="form-control form-control-alternative"
                  placeholder="Name" required >
May
11
3 days ago
Activity icon

Replied to Vue 3 Sanctum Auth Login Unsuccess

I've fixed this issue. It was related to sanctum url.

Activity icon

Replied to Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

Hi, I have posted the new issue with full codes with GitHub link.

Activity icon

Started a new Conversation Vue 3 Sanctum Auth Login Unsuccess

Hello, I am trying make crud api operation with Laravel sanctum auth in SPA VUE 3 with bootstrap 5 ui. But I could not login and redirect to dashboard or books where crud operation is done for books.

The full code is here -> https://github.com/bhojkamal/lara8_vue3_spa_sanctum_auth Can someone look over it and help me to make it fully functional? I will appreciate a lot.

Activity icon

Replied to Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

Thanks for your response. I appreciate it. However, if we use this - {!! !!}, in vscode editor, it is showing error and it format differently on save as below and it does not work if I save it like this.

<script>
  window.Laravel = {
    !!json_encode([
      'isLoggedin' => true,
      'user' => Auth::user()
    ]) !!
  }
  </script>

On console the error is Uncaught SyntaxError: Unexpected token '!'

The error is before saving is like this

<script>
  window.Laravel = {!! json_encode([
      'isLoggedin' => true,
      'user' => Auth::user()
    ]) !!}
  </script>
Errors in vscode:
Non-null assertions can only be used in TypeScript files.javascript
Non-null assertions can only be used in TypeScript files.javascript
Property assignment expected.javascript
May
10
4 days ago
Activity icon

Replied to Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

Now, I almost solved it. But when login, it is not redirected to dashboard. It is still on href="/". What is missing on App.vue or Dashboard.vue. But I am able to register new user and it is saved to database. Thanks.

Activity icon

Replied to Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

Yes, when I changed to

<script>
  window.Laravel = '<?= json_encode([
      'isLoggedin' => true,
      'user' => Auth::user()
    ]); ?>'
  </script>

It is working now. And how can I put this in @json($data) then? note:<?= means <?php echo

May
09
5 days ago
Activity icon

Replied to Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

That's what I am wondering, why Md Obydullah is using it on blade? and what is the function of !! (double exclamation sign) there? Why he is using it and window.Laravel? Whatever, I need the solution for it? How can we make better code and working application for this example?

Activity icon

Started a new Conversation Uncaught SyntaxError: Unexpected Token '!' And Uncaught TypeError: Cannot Read Property

Hi, I have followed Laravel SPA with Vue 3, Auth (Sanctum), CRUD Example from https://shouts.dev/laravel-spa-with-vue3-auth-crud-example

I set up on my local, but it is not display anything.

The error on console is -

Error: Uncaught SyntaxError: Unexpected token '!' 

[Vue warn]: Unhandled error during execution of created hook 
  at <App>

Error: Uncaught TypeError: Cannot read property 'isLoggedin' of undefined

The first error is coming from app.blade

  window.Laravel = {
    !!json_encode([
      'isLoggedin' => true,
      'user' => Auth::user()
    ]) !!
  }
  </script>
  @else
  <script>
  window.Laravel = {
    !!json_encode([
      'isLoggedin' => false
    ]) !!
  }

Second error is coming from App.vue

name: "App",
    data() {
        return {
            isLoggedIn: false,
        }
    },
    created() {
        if (window.Laravel.isLoggedin) {
            this.isLoggedIn = true
        }
    },

And nothing is displaying, I think, due the the warning error ->

Unhandled error during execution of created hook at <App> on console.

I am wonder what is the use of window.Laravel? Can we replace it with better one for all in this application

Activity icon

Replied to Vue 3 Component Not Showing - Blade Is Showing

But I am wondering this warning on console -

app.js:12228 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.

and

DevTools failed to load SourceMap: Could not load content for http://localhost:8000/js/bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Activity icon

Replied to Vue 3 Component Not Showing - Blade Is Showing

Hello,

  • It is a silly mistake. On blade I put id="#app". It should be just id="app".
  • I found my mistake.
Activity icon

Started a new Conversation Vue 3 Component Not Showing - Blade Is Showing

Hello, My vue component is now displaying on the webpage but the content on blade is showing.

I have used laravel 8, vue3, vue-router 4 and bootstrap 5.

Similar technologies on another demo project is working.

on console - I got warning like this ->

app.js:12228 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
app.js:8786 [Vue warn]: Failed to mount app: mount target selector "#app" returned null. 

2nd one is the main issue I think.

on app.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min';
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')

on App.vue

<template>
  <div class="text-center">
    <h1 class="text-bold"> Namaste from vue component </h1> <!-- this is not showing on page -->
    </div>
  <router-view></router-view>
</template>
<script>
export default {
  name: 'App'
}
</script>

on blade

<body class="text-center">
  <div>
    <h2>Hello laravel 8</h2> <!-- it is displaying with text center, that is from bootstrap included on app.js
-->
  </div>
  <div id="#app"></div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>

on router/index.js

import { createRouter, createWebHistory } from 'vue-router';

import Home from '../components/Home.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
];

const router = createRouter ({
  history: createWebHistory(),
  routes
});

export default router;

on package.json

"devDependencies": {
        "@popperjs/core": "^2.9.2",
        "@vue/compiler-sfc": "^3.0.11",
        "axios": "^0.21",
        "bootstrap": "^5.0.0",
        "laravel-mix": "^6.0.19",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.3",
        "sass": "^1.32.12",
        "sass-loader": "^11.0.1",
        "vue": "^3.0.11",
        "vue-loader": "^16.2.0",
        "vue-router": "^4.0.6",
        "vue-template-compiler": "^2.6.12",
        "vuex": "^4.0.0"
    },
    "dependencies": {
        "audit": "0.0.6",
        "core-js": "^3.12.1",
        "fix": "0.0.6",
        "npm": "^7.12.0"
    }

I hope to find solution soon.

Activity icon

Commented on Using Vue 3 With Laravel

I have done same. The laravel-mix is working but it is displaying nothing on my webpage on webpage from the vue template but it is coming from blade template. I've imported the bootstrap 5 on vue but that bootstrap is working. On console I got warning this ->

 You are running the esm-bundler build of Vue. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle. See http://link.vuejs.org/feature-flags for more details.
initFeatureFlags @ app.js:12228
baseCreateRenderer @ app.js:12491
createRenderer @ app.js:12479
ensureRenderer @ app.js:17172
createApp @ app.js:17189
./resources/js/app.js @ app.js:17954
__webpack_require__ @ app.js:22151
(anonymous) @ app.js:22301
__webpack_require__.O @ app.js:22185
(anonymous) @ app.js:22303
(anonymous) @ app.js:22305
app.js:8786 [Vue warn]: Failed to mount app: mount target selector "#app" returned null.

On simlar another laravel 8 and vue 3, it is working. I am wondering what's wrong and where? Would you please figure out for me ? Thanks.

May
05
1 week ago
Activity icon

Replied to On Update Validate Unique Email For The User In Laravel 8 And Password Optional

@tykus Thank you for your explanation. In my project, admin and super admin can add any user, but doctor can only update his profile.

I think this is good.

Route::put('users/{user}', [UserController::class, 'update'])->name('users.update');
Activity icon

Replied to On Update Validate Unique Email For The User In Laravel 8 And Password Optional

I have passed the user id in the form as name="id" in hidden and got id as $id = $requeest->input('id') so it updates the user data with this id. What is the best way, in your opinion? @tykus How do you write the code in the box?

Activity icon

Replied to On Update Validate Unique Email For The User In Laravel 8 And Password Optional

In the routes, I have -> Route::get('user/{id}/edit', [UserController::class,'edit'])->name('user.edit'); Route::put('user', [UserController::class,'update'])->name('user');

In the UserContoller, I have method -> public function update(UserRequest $request)

Activity icon

Awarded Best Reply on On Update Validate Unique Email For The User In Laravel 8 And Password Optional

This worked for me. I've sent hidden id from form as well.

'email' => ['required', 'email', Rule::unique((new User)->getTable())->ignore($this->id ?? null) ], 'password' => [ $this->id ? 'nullable' : 'required', 'confirmed', 'min:6' ]

Activity icon

Replied to On Update Validate Unique Email For The User In Laravel 8 And Password Optional

This worked for me. I've sent hidden id from form as well.

'email' => ['required', 'email', Rule::unique((new User)->getTable())->ignore($this->id ?? null) ], 'password' => [ $this->id ? 'nullable' : 'required', 'confirmed', 'min:6' ]

May
04
1 week ago
Activity icon

Started a new Conversation On Update Validate Unique Email For The User In Laravel 8 And Password Optional

Hello, How can I validate the unique email on update on laravel 8 and also how to make password optional if enter need confirm? My this code didn't work -

public function rules() { return [ 'email' => [ 'required', 'email', Rule::unique((new User)->getTable())->ignore($this->route()->user->id ?? null) ], 'password' => [ $this->route()->user ? 'nullable' : 'required', 'confirmed', 'min:6' ], ]; }

May
03
1 week ago
Activity icon

Replied to Keep Selected Value After Failed Validation In Form In Laravel 8

It gives the exact value on @dump old user type but it is not selected.

array:1 [▼ "old-user-type" => "1" ]

screenshot is here. => prnt . sc/12fjx44 to see remove the space around dot and past on address bar on browser coz it didn't allow to post link

Activity icon

Replied to Keep Selected Value After Failed Validation In Form In Laravel 8

@tykus I found the same on stackoverflow as well but it didn't work to my, I could not figure it out. My code is as follow:

{{ __('User Type') }}

            <select
              class="form-control form-control-alternative{{ $errors->has('user_type') ? ' is-invalid' : '' }}"
              name="user_type" id="user_type" required>
              <option value="">Select User Type</option>
              <option value="1" {{ old('user_type') === 1 ? 'selected' : '' }}>Doctor</option>
              <option value="2" {{ old('user_type') === 2 ? 'selected' : '' }}>Admin</option>
              <option value="3" {{ old('user_type') === 3 ? 'selected' : '' }}>Super Admin</option>
            </select>
Activity icon

Started a new Conversation Keep Selected Value After Failed Validation In Form In Laravel 8

Hello, how can we keep the selected value in select option in form submit validation fails? so that we don't need to select it again if there is validation error in other inputs and didn't submit the form.