I am using the package https://github.com/alexusmai/laravel-file-manager which comes with either a pre-compiled js file or you may use npm to create fronted through a vue-componenet from https://github.com/alexusmai/vue-laravel-file-manager. I am using the Laravel file-manager in my application, but I would like to make customization’s to the vue files to change the front-end. What I tried so ..
Category : vue.js
I’m starting to use Laravel + Inertia, so I’m having tons of problems to get what I want since I’m new with Vue. In this particular case I’m using CKEditor 5 to save my posts into my DB. The problem comes when I want to use the edit function of my controller, cause I don’t ..
how to loop the data from database my route in laravel is Route::get(‘api/contacts’, [ContactController::class, ‘index’])->name(‘contact.index’); and im trying to display all the list but im confuse with the js code someone expert here and please help me class ContactController extends Controller { /** * Display a listing of the resource. * * @return IlluminateHttpResponse */ ..
I have a laravel project with VueJs frontend and auth with Laravel sanctum. Everything works fine, however one user can’t login with his iPhone and iPad. I told him to uncheck "Block all cookies" function and it seems that he didn’t have that checked. What could be the reason for this? Sourc..
I’m trying to do some kind of invoice builder, when user can add rows, choose element in Select and type Amount and Price. It’s now working with one row in the table, but how it can be done with multiple rows? <tr> <td> <select v-model="formElement" class="custom-select"> <option v-for="element in elements" :key="element.id" :value="element.id">{{ element.title }}</option> </select> ..
I’m new to Vue js and I get this error vue.js:1400 Uncaught TypeError: Cannot read property ‘post’ of undefined at Proxy.store (D:WorkspaceWebLaravue-clientsrcviewsproductcreate.vue:86) I followed a tutorial from someone on youtube, but that person did not get this error <form @submit.prevent="store()"> <div class="mb-3"> <label for="" class="form-label">Name</label> <input type="text" class="form-control" v-model="product.name" /> <div class="text-danger">Validation Message</div> </div> <div ..
I have shared my code below. <template> <div class="productUnitPrice"> <div class="row"> <h4>Product Bundle</h4> <div v-for="(unitPackage,index) in this.UnitPackages" class="col-lg-12" style="margin-bottom: 5px; background: #ddd"> <div class="pull-right text-right"> <!–increase and decrease row quantity –> <button type="button" v-on:click="AddUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">+</button> <span v-if="index > 0"> <button type="button" v-on:click="removeUnitPackage(index)" class="btn-info btn btn-success text-right pull-right btn-sm">-</button> </span> </div> ..
I am going to create a Laravel 8 + Vue JS 3 hybrid project.I have already setup everything, but when I npm run watch, there is an error like the one below. I have tried various ways to look at some forums but still error. Can anyone help me? WARNING in ./resources/js/components/index.js 6:2-15 export ‘default’ ..
I just installed FullCalendar using NPM, but is running into problems. (thread for how I installed; install FullCalendar via NPM to laravel project) The calendar is showing fine, but I can’t switch week, month or day or anything other. ie. Every time I click on next month it briefly flashes calendar for may, but then ..
When I use npm run watch it compiles my changes and the pages get updated and when I make another edit it also compiles this. However, after that first edit, it will just stop updating my page. I don’t get any errors. When I quit it and run npm run watch again it will again ..
The vue-laravel-file-manager package is the vue-fronted of a laravel package. The package can be installed using npm install laravel-file-manager –save and in my main.js I can register the componenet like this: import Vue from ‘vue’; import Vuex from ‘vuex’; import FileManager from ‘laravel-file-manager’ Vue.use(Vuex); // create Vuex store, if you don’t have it const store ..
I have this links: <li class="relative px-4 py-2 mt-1"> <span class="absolute inset-y-0 left-0 rtl:right-0 w-1 bg-indigo-600 rounded" v-if="route.current(‘home’)"> </span> <inertia-link class="inline-flex items-center text-lg w-full text-gray-300 hover:text-gray-400" :href="route(‘home’)" > <span class="ml-4 rtl:mr-4">Home</span> </inertia-link> </li> <li class="relative px-4 py-2 mt-1"> <span class="absolute inset-y-0 left-0 rtl:right-0 w-1 bg-indigo-600 rounded" v-if="route.current(‘products.index’)" ></span> <inertia-link class="inline-flex items-center text-lg w-full text-gray-300 hover:text-gray-400" ..
TLDR How do you properly lazy load Vue components within a Laravel application, using Vue routing in addition to Laravel’s own web routes? Full story: I have a Laravel application that is using Vue. Now that the application has grown considerably in size, I would like to lazy load the Vue components. To do this, ..
When I try to add courseDatas.title in v-for I get error: courseDatas is null App.vue <template> <div v-for="(courseDatas, index) in courseDatas" :key="index"> {{ index }} – {{ courseDatas }} </div> <script> export default { data() { return { courseDatas: JSON.parse( document.getElementById("app").getAttribute("course") ), }; }, }; Result When I add this: <template> <div v-for="(courseDatas, index) in ..
i’m before using vue(v2, cli) and laravel(for api server). in this case, i want to use laravel8 with vue2. so i’m setting laravel with vue. and i want to use vue component style tag. my vue component like this <template> <header class="nav__header"> <div class="nav__header-wrapper"> <div class="nav__top"> <div class="nav__top-content"> </div> </div> <div class="nav__menu-wrapper"> <div class="nav__menu-logo"> <a ..
I am working locally on a project where my Laravel backend is running by Laravel Valet on the url https://backend.app and my frontend is a Vue project running on http://localhost:8080. When I do the call from my frontend to my backend to generate the CSRF token I get a 200 response but I get a ..
I’m building a MPA with Laravel and Vue.js, and I made a form which posts to an api route. It worked when I was on my homepage, but now I moved it to a subpage (http://127.0.0.1:8000/muziek) and when I try to submit it, I keep getting the The POST method is not supported for this ..
I’m having a trouble on how can I implement conditional rendering inside v-for in laravel vue js based on the documentation of vue js v-for and v-if together is not recommended. It would be great if anybody could help me out, thank you so much in advance!. This is what flow looks like I know ..
I’m having a trouble why the data did not display in my table, I’ve been using v-for in tr to display the data info, but it did not work, Is there any wrong with my code?.It would be great if anybody could help me out, thank you so much in advance!. But it seems it ..
I tried importing vue-moment and initializing it by using .use(VueMoment) as shown below. But after i do that the whole app shows error. Anyone facing the same problem? require(‘./bootstrap’); // Import modules… import { createApp, h } from ‘vue’; import { App as InertiaApp, plugin as InertiaPlugin } from ‘@inertiajs/inertia-vue3’; import { InertiaProgress } from ..
I cannot upload multiple images in my Laravel + vue js project.. here is my code below my vue conponent <form @submit.prevent="addProduct" enctype="multipart/form-data"> <div class="form-group"> <div class="row"> <div class="col-lg-4"> <label for="product_image">Product Image:</label> </div> <div class="col-lg-4"> <input type="file" name="pics[]" id="product_image" @change="fieldChange" multiple> <has-error :form="form" field="product_image"></has-error> </div> <div class="col-lg-4"> <img :src="form.product_image" height="70px" width="85px" alt=""> </div> </div> </div> ..
I have vue.js component of pusher notification system in my Laravel app and I have to install tinymce for blog posts. MY tinymce and other jquery functions stops working if i add js/app.js in my main layout blade file. but everything works with normal jquery 3.4.1 public folder link. it is important for me to ..
I want open local docx file by firefox and google chrome when i used a tag gives the "security error" and when used from ActiveXObject gives the "not defined" Sourc..
I have recently migrated from Laravel Livewire to Laravel Inertia Vue. During the course while using Livewire, I created a trait called WithPerPagePagination then created a public variable of perPage with the default value of 10 and mounted the value to the session $this->perPage = session()->get(‘perPage’, $this->perPage);. Then with the help of lifecycle hook, created ..
i need help. How do I make with(‘attendance’) also filtered by course id? Adding my code: controller public function attendance($id) { $enrolls = CourseEnrolled::with(‘attendance’, ‘attendance_count’)->where(‘course_id’, $id)->where(‘academic_year’, GeneralSettings::first()->academic_year)->leftJoin(‘users’, ‘course_enrolleds.user_id’, ‘=’, ‘users.id’)->select(‘users.name AS firstname’, ‘users.lastname AS lastname’, ‘users.id AS user_id’)->get(); $attendance_events = DB::table(‘attendance_events’)->where(‘attendance_events.course_id’, $id)->where(‘attendance_events.academic_year’, GeneralSettings::first()->academic_year)->leftJoin(‘lessons’, ‘attendance_events.event_id’, ‘=’, ‘lessons.id’)->select(‘lessons.date AS date’, ‘lessons.name AS name’)->orderBy(‘lessons.date’, ‘ASC’)->get(); return response()->json([‘enrolls’ => ..
Web Development Company
Free Hosting Company
