Category : vue.js

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 ..

Read more

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 */ ..

Read more

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> ..

Read more

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 ..

Read more

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> ..

Read more

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 ..

Read more

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" ..

Read more

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 ..

Read more

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 ..

Read more

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 ..

Read more

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> ..

Read more

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 ..

Read more

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’ => ..

Read more