vincej

Member Since 7 Years Ago

Calgary, Canada

Experience Points
50,960
Total
Experience

4,040 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
213
Lessons
Completed
Best Reply Awards
2
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 11
50,960 XP
May
12
6 days ago
Activity icon

Replied to Blade: Unexpected Identifier "crew_name", Expecting ")"

Thanks !!! Heavens I feel stupid!! - total word blind !

Activity icon

Started a new Conversation Blade: Unexpected Identifier "crew_name", Expecting ")"

This is bazaar - If I delete the following code from my Blade view, I get no error. Leave it in and I get the above error.

<div class="row">
            <div class="col-md-2">{{ Form::label('crew_name', 'Crew Name:) }}</div>
            <div class="col-md-4 mb-2">{{ Form::text('crew_name', $crew_edit[0]->crew_name , ['class'=>'form-control ','readonly'=>'readonly']) }}</div>
        </div>

The value $crew_edit[0]->crew_name is fine, it works elsewhere in the form and is passed in from the controller thus:

public function edit($id)
    {
        $crew_edit = Crew::where('crew_id',$id)->get();
        $crew_members = $this->crew->editContractor($id);
        $locations = DB::table('location')->pluck('location_name', 'id');
        $skills = DB::table('skill_type')->pluck('skill', 'skill_id');

    

        return View('labour/crews/edit', [
            'crew_edit' => $crew_edit,
            'skills' => $skills,
            'locations' => $locations,
            'crew_members' => $crew_members
        ]);
    }

What in the heck is going on? I have never seen anything like this!

Many thanks !

Apr
29
2 weeks ago
Activity icon

Replied to What Exactly Does The Handle Method Do?

Thank you for your reply. I will not pretend to understand the background code to this, but nevertheless, I am grateful to know that there is an operation behind the handle method and that it is not just some random function name. Additionally, I also realise that this is something which, as a user of Laravel, perhaps I don't need to know, just use.

Best reply award.

Apr
28
2 weeks ago
Activity icon

Started a new Conversation What Exactly Does The Handle Method Do?

Dumb question time perhaps. I have been looking at various L8 Middleware, and I notice the use of public function handle()

public function handle($request, Closure $next, $guard = null)
    {
        if (Auth::guard($guard)->check()) {
            return redirect(RouteServiceProvider::HOME);
        }
        return $next($request);
    }

I have dug around, and it appears in the L8 API and so I presume it is proprietary to Laravel. The API tells me almost nothing what it actually does. Ok, I can see it takes various parameters including a Closure which then fires the next($request) in the stack of middleware.

But does the handle method have a specific operation attached to it, or is it just a useful label for a function which Taylor uses?

Apr
26
3 weeks ago
Activity icon

Replied to Session Regeneration Creates Annoying 419 Error

@snapey thanks for that Mark, That is how I understand things as well. srF7 suggests I need to specifically regenerate a new session at login. That does not makes sense to me.

Changing subjects - yes, I used Vue to mange a single page in this app where I have mountains of checkboxes ( as you know they are my nemesis!). However I have found Vue quite complex, and therefore not quite to solution to JS I had hoped so I am revisiting Livewire. Hope you're well.

Apr
25
3 weeks ago
Activity icon

Replied to Session Regeneration Creates Annoying 419 Error

Thank you for all your replies.

I got to the bottom of the problem. In forming a logout page as recommended by @snapey years(?) ago, I stupidly used my master layout which included a csrf token. What should have done is simply created a simply clean HTML page. OK, so I fixed that.

On the controller which sends you to the logout page, I have still left in place:

public function logout(Request $request){
        Auth::logout();
        $request->session()->flush();
        return view('auth/logout');

I looked up in the docs invalidate() and regenerateToken(). I do not understand the point of recreating the sessions or tokens. Surly that is exactly what I am trying to avoid. I read @snapey two articles, and maybe I am not understanding them fully, Ok, I get it some bad person might force a logout and then hijack the session. However, I do not see how they apply to my case. All I want is for the user to logout and everything is neutralised.

Activity icon

Replied to Session Regeneration Creates Annoying 419 Error

https://laravel.com/docs/8.x/session#regenerating-the-session-id

view logout was put into place to avoid going straight to login. this was giving trouble at that time. And was a recommendation made to me a long time ago by snapey, who is #1 on the leader board.

Activity icon

Started a new Conversation Session Regeneration Creates Annoying 419 Error

Ok, I am using Laravel UI, not Breeze or Jetstream or Fortify. So on my logout function I clear the existing sessions and regenerate to avoid session fixation.

public function logout(Request $request){
        Auth::logout();
        $request->session()->flush();
        $request->session()->regenerate();
        return view('auth/logout');

However this is a pain, as when you go to login again later, the new session has of course timed out, and I get a 419 error, session timed out , which I have adapted to give a meaning full user message. But still, the user now has to close that specific webpage and create a new tab to login - what a pain.

So - the easy answer is just don't regenerate the session. But the Laravel docs suggest I should .... so do I have any better options? Can I just remove the session()->regenerate()?

Many thanks!

Apr
16
1 month ago
Activity icon

Started a new Conversation Search Docs (Press '/') Does Nothing - Why?

I have no idea what this does. You can press / till the second coming and it appears to do nothing. What gives?

Activity icon

Replied to Do You Really Like Tailwind And Livewire ?

I am a luddite. I write raw CSS and use classes and ID's. I also use Bootstrap 4. OK, OK, so I want to catch up with the times. I've read through the docs for Tailwind and read a few articles. Apologies to all the enthusiasts. I just don't see the point. For me, it is exceptionally verbose. To overcome it's verbosity and the need to repeat the same syntax, I looked into utility classes. A load more complexity. For me, Tailwind is a solution to a problem that no longer exists. Ok, sure, agreed, back when we struggled with Bootstrap 3 or earlier, Tailwind could have really helped big time, however today with Bootstrap 5 you have all the utilities Tailwind offers such that you can modify existing pre-packaged components or build entire new ones from scratch with none of the verbosity. More strength to those people who enjoy Tailwind. However, for this Luddite, I am going to stick with Bootstrap 5. Cheers.

Apr
15
1 month ago
Activity icon

Replied to Laravel Nestset Vs Baum?

I am using it as well. As I do not have your skills would it be at all possible for you to share your code on Github? thanks

Activity icon

Replied to Why Is One Of My Dev Dependencies Not Working?

Perfect ! It is working nicely! Thank you ! Perhaps I need to reread the docs. However I have watched Jeffrey's tutorial on MIx. I am totally new to NPM and Mix, having always previously just used CDN's. Now I feel it is time to grow a little :o)

However, importing bootstrap-datepicker off of NPM did not bring down the css as part of the package - odd. So all I could think of doing was going to the CDN, pulling down the minified css and sticking in my public folder with a link in my header. That works - but, question: is that what you would have done?

For me things are still not clear how to import stuff. Things like JQuery, Twitter Bootstrap, Axios just work out of the box, where as imported packages give me a headache. It is still unclear to me the difference between bootstrap.jsand app.js, they appear to be used interchangeably.

Thanks again ! Best answer reward.

Apr
14
1 month ago
Activity icon

Replied to Why Is One Of My Dev Dependencies Not Working?

Thank you for your response! I'm not sure I follow.

  1. The only thing my browser dev says is

Failed to load resource: the server responded with a status of 404 (Not Found)

  1. Bootstrap js does not usually need a link in your header. I believe MIX folds it into app.js

  2. As stated above, I also have in my header a link: <script src="{{asset('bootstrap-datepicker')}}" defer></script>

Activity icon

Started a new Conversation Why Is One Of My Dev Dependencies Not Working?

Ok, so I decided to rip all my cdn's out of my header file and import the various JS packages into L8 using npm. One of those is called bootstrap-datepicker and I can not get it to load into my application.

Ok - so I downloaded it and NPM has updated my packages.json file:

"dependencies": {
        "bootstrap-datepicker": "^1.9.0",
        "moment": "^2.29.1",
        "vue": "^2.6.12"
    }

I have run npm install, and if I look into the node_modules folder I can see it there.

I also added require('moment') in my resources/app.js file

I have run npm run development

I also have in my header a link: <script src="{{asset('bootstrap-datepicker')}}" defer></script>

Nevertheless, when I run my page I am getting a 404.

Any ideas where I am going wrong?

Many thanks !

Apr
06
1 month ago
Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

You are not going to believe this. Soon after I cam e in I googled "Axios with Vue" and I found an article which simple said, add to your bootstrap.js

https://serversideup.net/configuring-axios-globally-with-vuejs/

window.axios = require('axios');

I did that and Bingo, Happiness!

Thank you for all your help. You deserve a gold medal. btw, were are you? You must be west coast or else you don't sleep. I am north of Montana in Alberta Canada.

So all I have to do now is tighten up my Cors policy. I'll dig around and then create a fresh Q for that if need be.

Cheers!

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Heah Neil, I am going to have to call it a night and this this up again tomorrow AM. My dog is bursting to pee and has not been out in 10 hours poor thing.

Many thanks again for sticking with this. It is a mystery!

Cheers

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Maybe I should rip AXIOS out and replace it with Ajax. At least I have a bit of a better idea as to what I am doing with Ajax :o)

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Updated the code as you requested. Still the same error. Checked the Network XHR, and very curious there is nothing coming out in the panel. This tell me nothing is being transmitted. Odd. Bt way of reminder here is the axios POST:

methods:{
          updateChild(child){
            this.changedChild = child;
            console.log(child.child_id,child.childFirstName, child.status)

            axios.post('https://kidsclub.site/upDateChild', {
              child_id: child.child_id,
              status: child.status
          })
          .then(function (response) {
              console.log(response);
            })
          .catch(function (error) {
            console.log(error);
            });
          },

I tried adding www to the url as Cronix suggested in another post to no avail. Thank you for sticking with this. That is very good of you!

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

No. My application is at DigitalOcean. I have been accessing it through this dialogue through ssh. You can look at it if you want.

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

yes, my server is on DigitalOcean. I have the below code as with a * because my CORs policy refuses to recognise the initiator as given in the console log, so that is something else I need to fix, I can't leave it open like this.

Anyway Progress is being made! The orginal Cors error below is now gone:

Access to XMLHttpRequest at 'https://kidsclub.site/upDateChild' from origin 'https://www.kidsclub.site' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

But I am back to the original error - ugh:

Failed to load resource: the server responded with a status of 419 (unknown status)

Apr
05
1 month ago
Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Thank so far. I added the code to my 'boostrap.js' and i recompiled. Unfortunately this has generated a new error in the console:

Access to XMLHttpRequest at 'https://kidsclub.site/upDateChild' from origin 'https://www.kidsclub.site' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

But I don't have x-csrf-token in my Cors policy:

  public function handle(Request $request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin','*') //https://Kidsclub.site
            ->header('Access-Control-Allow-Methods','GET, POST')
            ->header('Access-Control-Allow-Headers','Content-type,x-requested-with, Authorization');
    }

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Let I have the CSRF in my master blade file. I am unclear about your second statement:

and in your js

axios.defaults.headers.common = { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': window.csrf_token };

Activity icon

Replied to 419 Error: Adding CSRF To Axios Post Request ?

Thank you for your quick reply. I like the idea of your first one. However, I am still unclear where exactly I stick the code. I put it just under the opening script tag of my template, and it had no effect. So I assume has to go somewhere inside Axios?

Activity icon

Started a new Conversation 419 Error: Adding CSRF To Axios Post Request ?

I am 100% new to Axios having come over from Ajax. I am also brand new to Vue, and I am getting a 419 error in the JS console when I attempt to POST a value into L8 through Axios inside Vue. This appears to be a missing CSRF token in the Axios header. I have looked across Laracasts and SO and tried a few things but so far have not got it right. The GET api call works fine

I do have the CSRF TOKEN in the header of my Blade file where in my Vue template is presented, but the CSRF token is not in the Axios post call. Where should the CSRF header go? Many thanks !

Here is my Axios code:


methods:{
          updateChild(child){
            this.changedChild = child;
            console.log(child.child_id,child.childFirstName, child.status)

            axios.post('https://kidsclub.site/upDateChild', {
              child_id: child.child_id,
              status: child.status
          })
          .then(function (response) {
              console.log(response);
            })
          .catch(function (error) {
            console.log(error);
            });
          },

          loadChildren:function (){
            axios.get('https://kidsclub.site/api/allChildren')
            .then((response)=>{this.Children = response.data.data; })
            .catch(function (error){
                console.log(error);
              }
             );
          },

       }

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Ok Fixed Vue error with in app.js:

import Vue from 'vue'
window.Vue = Vue;

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

@apex1 Bravo!!! You will the golden crown of victory! I tried your first option, and nothing much changed, in the sense that everything worked but there was no compilation going on. So, on to option two - upgrade. Well that required the upgrading a various dependencies including node. But in the end it was all worth it. I tried in production and it minified my default css excellently. However, I still have one error coming through on the console.

Uncaught TypeError: Vue.component is not a function

There is a "solution" to it on Laracasts, but I am suspicious of it.

Also I notice, that where it did minify the default.css and app.js nevertheless, functions.js were not minified. Curious.

I still have an entirely different problem around CORs policy, but I will create a separate question for that. I am astounded that this question has needed 264 active views in order to arrive at a a solution. In the end the solution was standing in pain site. I am indebted to you. Thanks is not enough. Best answer applied.

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Thank you very much for all your efforts! I will update you tomorrow. Cheers

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Thanks for that - I will update you tomorrow. Cheers

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

"private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.21.1",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.9",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.15.2",
        "sass-loader": "^8.0.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^2.6.12"
    }
}

Resources:

	css
	js
	lang
	sass
	views
Activity icon

Replied to Laravel Mix Does Not Pull In CSS

There is no error as such, it just does compile.

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Thanks for that, but nope styles did not work. Bummer. So, far I have had the most success with converting the css into scss and compiling that. It is alsmost as if something in the config of webpack refuses to look at raw css

Apr
04
1 month ago
Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Found one - I hope it works!!

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Thanks for not giving up on me. Tried that, and it had no affect. I have another idea. The sass file is compiling. Is there a reliable utility to convert css to sass, or do I have to do it manually?

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

I know you guys must be fed up with this, but I am now desperate, so please bear with me. I have read the Laravel docs, AND I watched two videos from Jeffrey Way on setting up Mix. The good news news is that my Mix will compile the following files: Javascript, Vue, Sass.

But it absolutely refuses to compile my default.css. Here is my webpack.mix.js file:

const mix = require('laravel-mix');

mix.js(['resources/js/app.js', 'resources/js/functions.js'], 'public/js')
   /* .css(['resources/css/default.css', 'resources/css/app.css'], 'public/css')*/
    .css('resources/css/app.css', 'public/css')
    .css('resources/css/default.css','public/css');
    .sass('resources/sass/app.sass','public/css');

as you can see I tried putting my default.css and my app.css in an array, but that made no difference. Indeed Jeffrey has them in separate files as well.

I have restarted my DigitalOcean server, I have updated NPM. The only thing I have not done is uninstalled Mix and reinstalled it, only because it appears to be working for the other files. I do have a strange file called app.css.map which is very ugly. I have no idea what it does.

If any of you can rack your brains as to why it will not do my default.css you will receive my everlasting gratitude ! :o)

Many Thanks !

Apr
02
1 month ago
Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

To All Interested: I just had a thought, to me it seems probable that somehow Vue is trying to compile my Blade views. That is to say there is no specific fault with my Vue template as such but rather the set up of Mix. Possible???

Here is the Mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/functions.js', 'public/js')
    .css('resources/css/default.css','public/css')
    .css('resources/css/app.css','public/css');
    

Here is App.js

require('./bootstrap');

window.Vue = require('vue');


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('front-page', require('./components/Front.vue').default);


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

Bootstrap.js


window._ = require('lodash');


try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

@chaudigv Well spotted, however, it sadly made no difference to the JQuery snippets giving an error on an unrelated page in the console.

Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

Ok, so I gave your suggestion a go, and assuming I have understood you correctly, I did:

 <input
                       type="checkbox"
                       class="custom-control-input"
                       :id="child.child_id"
                       v-model="child.status"
                       @change="updateChild(child)"> <input />

It did not solve the problem.

Is my template a .vue file? Yes, as a Vue newb I actually created it following a tutorial from Povolas Korop / Daily Laravel https://www.youtube.com/watch?v=4uVNz9sQn18&t=470s

Re, the other script tag, it lives in a totally unrelated file, which somehow by magic, Vue is looking into.

Do I need this Jquery script? - yes and no, Do I want to show an alert and have it fade, yes. To that end, I could rip them all out and put them all into a separate file wrapped in a JS function. I absolutely do not want to have to rip them all out. I was hoping that JS / Jquery would mix with Vue.

I am importing the JQuery off a CDN. I wonder if installing it locally with NPM would help? I can't fathom that it would.

Many thanks for all your feedback and suggestions.

Apr
01
1 month ago
Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

Thanks for that, I am not getting any open tag errors. I do get a Error on-> Line :5 Column :1 Message :Extra content at the end of the document relating to my <html lang="en"> tag. I do not understand why this is being flagged. There is no extra content after the closing HTML tag.

I have also check other pages, and the validator does not like my hidden inputs. But no sign of open tags.

@apex1 I can not see any <input /> on that template and the one <input does have a closing >

Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

Unless I have misinterpreted your suggestion, I can not see any open tags anywhere. I am using PHPStorm, and usually if there is an open tag you will get a squiggle and a notice. Furthermore, every page where I have a snippet of JQuery is giving the same error. So, I am thinking there is something wrong with my template, Here is the whole thing:

<template>

  <div class="container">

    <h5 class="heading ml-4">Children Absent / Present</h5>

    <div class="border_charts">
        <table class="table ">
          <thead>
          <tr class="col-4">
            <th class="tableHeading col-4">First Name</th>
            <th class="tableHeading col-4">Last Name</th>
            <th class="tableHeading col-4 ">Absent / Present</th>
          </tr>
        </thead>
          <tbody v-for="child in Children">
          <tr>
            <td class="col-4"><a :href="'/getchild/'+ child.child_id">{{child.childFirstName}}</a></td>
            <td class="col-4"> {{child.childLastName}}</td>
            <td class="col-4">
              <div class="custom-control custom-switch">
                <input
                       type="checkbox"
                       class="custom-control-input"
                       :id="child.child_id"
                       v-model="child.status"
                       @change="updateChild(child)" >
                <label class="custom-control-label" v-bind:for="child.child_id">Absent / Present</label>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
    </div>
  </div>
</template>


    <script>
      export default {
        data: function () {
          return {
            Children: [],
            changedChild:{}
          }
        },
        mounted() {
        this.loadChildren();
        },

        methods:{
          updateChild(child){
            this.changedChild = child;
            console.log(child.child_id,child.childFirstName, child.status)

            axios.post('upDateChild', {
              child_id: child.child_id,
              status: child.status
          })
          .then(function (response) {
              console.log(response);
            })
          .catch(function (error) {
            console.log(error);
            });
          },


          loadChildren:function (){
            axios.get('/api/allChildren')
            .then((response)=>{this.Children = response.data.data; })
            .catch(function (error){
                console.log(error);
              }
             );
          },

       }
    }
    </script>




Activity icon

Replied to Vue Gives Error On Page Unrelated To Template

Do you mean in the template? It is not part of the page where the template is, it is an entirely different page.

Activity icon

Started a new Conversation Vue Gives Error On Page Unrelated To Template

Yup, I get this error on a page which absolutely nothing to do with the Vue Template or the page where the template is presented

[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

The error goes on to complain about some JQuery I included at the bottom of the page, which has nothing to do with the template, yet the error message also says it is found in the Root.

<script>
            $(document).ready(function() {
                 let rate = $("#rate").val();
                $("#rateHidden").val(rate);
             });
        </script>

SO, any ideas how I can have these snippets at the bottom of unrelated pages. I would rather not have to pull them all out, and place them all into a separate file with functions around them - ugh.

Many thanks!

Mar
31
1 month ago
Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Ok, thanks I'll watch that - importing default.css into app.scss did not work, when I do a npm run dev I got. Note I do not see app.scss. Modifying my mix file does not work either:

 DONE  Compiled successfully in 9933ms                                  12:26:24

       Asset     Size   Chunks             Chunk Names
/css/app.css  178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Excellent.

I am thinking that perhaps I should modify the webpack.mix.js file to look like this - what do you think?

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .css('resources/css/default.css','public/css');

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

Also, note - in my dev machine my default.css is pulled in. I guess my remote machine mix is not configured properly. I have a thought that my error lies in that I have placed my default.css inside the public folder since I have never used Mix before. So, I am thinking that with Mix in place I now need to move my default.css into resources / css / default.css, and run dev???

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

In my local machine where the development was done I have:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

In the remote DigitalOcean server I have nothing /empty

Note: I do not use scss I just write raw css.

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

@lemmon Sorry, I was on my cell phone last post, could not get to my mix.js

Also apologies for what may seem like dumb questions, I am a total newb with Vue etc having just some over from JQuery. Let me guess .... my default.css is not included here and that is why it is not working???


const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Mar
30
1 month ago
Activity icon

Replied to Laravel Mix Does Not Pull In CSS

@lemmon default is missing. I have no idea why app.css is empty, but that seems to be common amongst what I have seen and read. Thanks.

Activity icon

Replied to Laravel Mix Does Not Pull In CSS

@piljac1 Yup, my default css is there when under sources, also under source code. However, app.css is empty. @jlrdw at the moment I am using npm run dev only because I know that works in my production system which is local.

Activity icon

Started a new Conversation Laravel Mix Does Not Pull In CSS

I have everything working nicely on my development server, however when I implement the the system onto my remote server at DigitalOcean, I am not getting my proprietary css.

My css is pulled in like this:

 <link href="{{ asset('/css/app.css') }}" type="text/css" rel="stylesheet">
    <link href="{{ asset('/css/default.css') }}" type="text/css" rel="stylesheet">

My mix will compile, but does not bring in the default/css

Any suggestions?

Activity icon

Awarded Best Reply on Cors Policy Does Not Work, Still Getting Error.

@jlrdw actually, I kind of solved it, but not quite. I previously had "maintenance mode" on, which was blocking access to my api. Ok, so I turned it off, and I recompiled the Vue template, and now it is working.

I am not keen on Livewire, I hope that Vue is worth this level of learning!

Many thanks as always for your help and support !!