apex1

@vincej Okay I think have a solution: In your resources/sass/app.scss file (make sure it's .scss and not .sass), put this:

@import "../css/default";

Your webpack.mix.js will looks like:

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

This will combine both into a single css file, and then you bring in your main layout file

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

OR

Upgrade to laravel-mix version 6 and update your webpack.mix.js file to :

   mix.js(["resources/js/app.js", "resources/js/functions.js"], "public/js/app.js").vue()
	.sass("resources/sass/app.scss", "public/css")
    .css("resources/css/default.css", "public/css");

If you upgrade to laravel-mix 6, you might need to get rid of --hide-modules in your npm script "npm run development" and "npm run production"

@vincej Okay I think have a solution: In your resources/sass/app.scss file (make sure it's .scss and not .sass), put this:

@import "../css/default";

Your webpack.mix.js will looks like:

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

This will combine both into a single css file, and then you bring in your main layout file

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

OR

Upgrade to laravel-mix version 6 and update your webpack.mix.js file to :

   mix.js(["resources/js/app.js", "resources/js/functions.js"], "public/js/app.js").vue()
	.sass("resources/sass/app.scss", "public/css")
    .css("resources/css/default.css", "public/css");

If you upgrade to laravel-mix 6, you might need to get rid of --hide-modules in your npm script "npm run development" and "npm run production"

Can you show your package.json as well as the structure of your resources directory?

What happens if you add a trailing / to 'public/css'? Like this:

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

Notice the change, 'public/css/' from 'public/css'.

Anything?

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

I don't remember about Vue, but at least in React you have to close single tag elements such as input. So <input> would have to be <input/>.

Is your file a .vue file? Most likely can't have another script tag other than the script to define the component, etc. Also, is jQuery really necessary for what you're doing?

<input /> needs a closing tag.

Your method currentMonthPrice(material) isn't returning anything, just the returning in the callback function (forEach).

But on a side note, why mix var and let??

You can try updating your laravel-mix to version 6. And then changing your webpack.mix.js file to

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

(default mix file that comes with laravel/ui) I just did a fresh install now and seems to be working.

Can you show package.json and webpack.mix.js?

Did you run npm run dev again?

require('./...').default

You're missing the .default

Might need to clear browser cache.

There should also be a javascript file if you want to be able to use the interactivity. Is that in the project at all?

Why not just used named routes?

Look into Array.prototype.reduce()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Any errors in browser console?

If you want your pivot to contain additional information add ->withPivot('user_name') where you defined your relationships.

https://laravel.com/docs/8.x/eloquent-relationships#retrieving-intermediate-table-columns

@rod2rick In your put call (axios), switch your config and request data. axios.put('/url', { ...your_data }, config);

@rod2rick What happens when you replace $produit->update(); with $produit->save();? I believe the [model]->update() method is for mass assignment updates, e.g., $produit->update(['name' => 'new name']);.

Is your Produit model supposed to be Produit or Produits ?

If you want your pivot to contain additional information add ->withPivot('user_name') where you defined your relationships.

https://laravel.com/docs/8.x/eloquent-relationships#retrieving-intermediate-table-columns

Try right-clicking on the browser's refresh button and select empty cache and reload.

^ https://www.youtube.com/watch?v=QQS5oEOguRU

This will help explain.

Why not try to update laravel/installer?

Why not try to update laravel/installer?

Pass an Id parameter to this.getProduit() in your mounted(). I don't think you produit in props either. Are you able to get the expected data?

Also, no need for a ternary in your toggleMenu() method. You can just do this.isMobile = !this.isMobile

You have a typo in your parent component. Should be methods: { ... } but you have method: { ... }

You have a typo in your parent component. Should be methods: { ... } but you have method: { ... }

What's the error?

Well thats a Laravel 5 tutorial and you're on Laravel 8. So some things are going to be different. Your routes should now be (Laravel 8)

use ...

Route::get('products', [ProductsController::class, 'index']);
Route::get('products/{product}', [ProductsController::class, 'show']);
etc...

And make sure to import the Product Controller.

use App\Http\Controllers\ProductsController;

You're using laravel 8, models now live in the Models directory. So on top of your file where you have use App\Product; change that to use App\Models\Product;

Could you also show your routes file (routes/api.php)?

Sorry turn the HTMLCollection into an array first.

const divs = document.getElementsByClassName("test");
const mySet = new Set();
[...divs].forEach(div => mySet.add(div.getAttribute('data-content')));

Looks like something wrong with your Laravel code. Can you post the controller method for /api/products?

A set will do that for you. A set will only have unique values.

let mySet = new Set()
divs.forEach(div => mySet.add(div.getAttribute('data-content')));

Maybe look into Sets. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

Its a browser extension created by the react theme. If you're using chrome etc search for react dev tools and install it then open the dev console and click on the Components tab.

Any errors in the console? Also check react dev tools, are the products loaded in your state ?

He or she is using axios. Make sure to set this.data = response.data.

Did you get rid of this by mistake?

if (document.getElementById('root')) {
    ReactDOM.render(<Main />, document.getElementById('root'));
}

Your user property is an array. Either take the first index [0] in your frontend or fix how you're sending the data from your controller. Probably need to change a ->get() to a ->first() when querying the data.

Your user property is an array. Either take the first index [0] in your frontend or fix how you're sending the data from your controller. Probably need to change a ->get() to a ->first() when querying the data.

Your movies property is an array. Loop over it or take the first index, value.movies[0].title

Your movies property is an array. Loop over it or take the first index, value.movies[0].title

Try using the StatusBar component.

import { StatusBar } from "react-native";

...
return (
<SafeAreaView>
	<StatusBar backgroundColor="blue" />
</SafeAreaView>
)

Show your entire script portion for the component. Why is asyncData() not inside the methods object?

This part :

<input class="rounded" v-model="this.form.breakfast" :value="dayNum" :id="mealID('breakfast', dayNum)" type="checkbox">
				<input class="rounded" v-model="this.form.lunch" :value="dayNum" :id="mealID('lunch', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.dinner" :value="dayNum" :id="mealID('dinner', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.dessert" :value="dayNum" :id="mealID('dessert', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.snack" :value="dayNum" :id="mealID('snack', dayNum)"  type="checkbox">

Your v-models should just be v-model="form.your_property", but you have "this.form.your_property"

This part :

<input class="rounded" v-model="this.form.breakfast" :value="dayNum" :id="mealID('breakfast', dayNum)" type="checkbox">
				<input class="rounded" v-model="this.form.lunch" :value="dayNum" :id="mealID('lunch', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.dinner" :value="dayNum" :id="mealID('dinner', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.dessert" :value="dayNum" :id="mealID('dessert', dayNum)"  type="checkbox">
				<input class="rounded" v-model="this.form.snack" :value="dayNum" :id="mealID('snack', dayNum)"  type="checkbox">

Your v-models should just be v-model="form.your_property", but you have "this.form.your_property"

value ="{{ $AboutMes->about_mes_middle_name }}">

Your problem is in the value field of your Last Name input. You have $AboutMes but you pass in $aboutmes.

In Laravel you can install everything as a devDependency.

https://stackoverflow.com/questions/40219015/laravel-which-npm-packages-should-be-in-dependencies-vs-devdependencies