$arrList = []; foreach ($product as $val) { $arrList[][‘name’] = $val->name; $arrList[][‘quantity’] = $val->quantity; } return response()->json($arrList); I am a PHP newbie, so I’m not sure how to handle this. I want the name and quantity to be in the same array. To the Vue side get the same result? (2) [{…}, {…}, {…}, {…}, ..
Category : vuejs2
Recently I’m working with vuejs my project on subdirectory here you can see where my images are not showing which are from public/images/ directory I searched a lot find many solutions but nothing works for me. but locally it’s working fine. code sample Home.vue <div class="widget-bg-image absolute"> <div class="widget-container"> <div class="image"> <img width="629" height="424" src="/images/big-banner/3.png" ..
In my Laravel 8 /vuejs 2/ bootstrap 4 app making reference to my site from emails(like confirm on registration) I need to work out laravel external url in vuejs component. It seems tricky… How can I do it ? Thanks! Sourc..
I`m trying to attach data from Axios request inside Vue component to v-model but it doesnt want to load for some reason… <div class="col-lg-6"> <div> <div class="form-group mb-4"> <label for="section_english_name">Section English Name</label> <input v-model="form.section_name_en" ref="section-name-english" type="text" name="title" class="form-control" id="section_english_name" > <div v-if="form.errors.has(‘section_name_en’)" v-html="form.errors.get(‘section_name_en’)" class="text-danger"/> </div> </div> </div> inside Data() data() { return{ addonSection:{}, addonDetails:[0], form: ..
I have GET request methods which called the maximum number of a product. data() { return { itemMaxQty: ” } }, methods: { setMaxItem(event) { const value = event.target.value; console.log(‘value’, value); if(value > this.maxItemQty) { value = this.maxItemQty } else if(value < 0) { value = 0 } }, maxItem(){ let item_id = this.itemID; axios.get("./available/" ..
I used vue-currency-input for make input look like money number. and i make a test on sandbox Codesandbox and run succesfully. and then i implement on my laravel vue projects. CurrencyInput.vue <template> <input class="form-control" ref="inputRef" :value="formattedValue" /> </template> <script> import useCurrencyInput from "vue-currency-input"; export default { name: "CurrencyInput", props: { modelValue: Number, options: Object }, ..
So I have this crud application having vuetify/vue js for the frontend and laravel for the backend. I want to be able to edit and delete array data and send it to the controller to update to the database. You’ll notice on the variable declaration I have students which is an array object to add ..
In laravel 8/vuejs 2 app I added new page with route in resources/js/routes/index.js: import ProjectsByCategory from "../components/ProjectsByCategory.vue"; … { path: "/projects_by_category/:slug", name: "projectsByCategory", component: ProjectsByCategory, meta: { title: "Projects By Category | " + project_name } }, But opening this page from homepage, I got errors: VM174:1 GET https://accounts.google.com/o/oauth2/iframerpc?action=listSessions&client_id=82594195761XXXXXX.apps.googleusercontent.com&origin=http%3A%2F%2F127.0.0.1%3A8000&scope=openid%20profile%20email&ss_domain=http%3A%2F%2F127.0.0.1%3A8000 400 (anonymous) @ VM174:1 Ch @ ..
I have problems with my computed value. If I add item to cart, the totalPrice will remain 0, until I click the component in Vue Devtools, it will display the value. However, the Item Count working normally. Why is that happening? :/ data() { return { totalPrice: 0, }; }, computed: { calcTotal() { this.cart.forEach((item) ..
In controller : public function index(Request $request, $id) { if (!empty($id)) { $product = product::select(‘name’, ‘price’, ‘quantity’) ->where(‘id’, $id) ->get()->toArray(); return response()->json($product); } } In vue i use axios to get data. axios .get("/api/product", { params: { id: id, }, }) .then((res) => { this.rows = res.data; }) .catch((error) => { console.log(error); }); It shows ..
I am trying to download an excel file. I have used axios for it. Below is my code: reportExcel(val) { axios .get("/algn/api/report/" + val) .then((res) => { var url = res.data; // http://localhost.local/public/files/data.xlsx const a = document.createElement("a"); a.href = url; a.download = url.split("/").pop(); document.body.appendChild(a); a.click(); document.body.removeChild(a); }) .catch((error) => { console.log(error); }); }, I am ..
In controller laravel: I use box/spout , I save the excel file in a separate folder, and i create a variable that points to the folder where the file is saved, and i return the vuejs view to download that file $path = ‘/files/’.$name; $urlFile = url(‘/files/’.$name); var_dump($urlFile); // Result: http://localhost.loca/file/data.xlsx I return view vuejs: ..
I am trying to pass id of currently selected row inside for loop when someone clicks on it And pass that id to vue component My index.blade file @foreach($cats as $cat) <tr> <td class="catme" data-id="{{$cat->id}}">{{$cat-> title}}</td></tr> @endforeach <car-component i want to pass prop here></car-component> <script> $(‘.catme’).on(‘click’,function(){ var a = $(‘.catme’).attr(‘data-id’) }) </script> I am unable ..
im using laravel 8 with api passport im trying to access the api of my project but it seems to have a problem the PROBLEM: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed. My Cors config ‘paths’ => [‘api/*’, ‘sanctum/csrf-cookie’], ‘allowed_methods’ => [‘*’], ‘allowed_origins’ => [‘*’], ‘allowed_origins_patterns’ => [], ‘allowed_headers’ ..
We have a laravel application with Vue js as the front end, CSS styles that are added in .vue component file are missing in the complied output js file. Instead of css styles, we have found weird text in the name of those css classes in app.js ( vue output js file ) The webpack.mix.js ..
I am building a Laravel Vue MPA Project using Laravel Default Authentication where most of the pages are served by Laravel. But for Form submission I am using Vue Component and the form is directly submitted to the API route. Each Page of Mine contains several vue component. An example is given below @extends(‘layouts.app’) @section(‘content’) ..
I am building a Laravel Vue MPA Project using Laravel Default Authentication where most of the pages are served by Laravel. But for Form submission I am using Vue Component and the form is directly submitted to the API route. Each Page of Mine contains several vue component. An example is given below @extends(‘layouts.app’) @section(‘content’) ..
I have a question how you guys get json data from another api and loop ex: this is my output on vue components <tr> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> <td>0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9</td> </tr> and i want to to request new api http://fromanotherwebsiteap/0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9 http://fromanotherwebsiteap/0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9 http://fromanotherwebsiteap/0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9 …………….. and get the json data ex: { "success": true, "client_id": "0x0cc5d2800ea2a76c8811b7d2d2091b09359378f9", "item_id": ..
So I’m using this middleware in Laravel to check if a user is blocked and then logout them out if they are: class CheckBlocked { public function handle($request, Closure $next) { if (auth()->check() && auth()->user()->blocked_until && now()->lessThan(auth()->user()->blocked_until)) { $blocked_days = now()->diffInDays(auth()->user()->blocked_date); $message = ‘Your account has been suspended for ‘.$blocked_days.’ ‘.Str::plural(‘day’, $blocked_days).’. Please contact administrator.’; ..
I have a Vue.js app wrapped in a Laravel application with authentication set up. Regarding security, I don’t want to serve the whole app.js in the request to the login page. Technically any user (with or without ill intent) has access to all information written in the javascript code. For example route definitions and static ..
I’m using date picker : <Datepicker :format="format" v-model="form.start" name="start"></Datepicker> Its format is something like this : data(){ return { format: "dd-MM-yyyy", form: new Form({ id:”, start: ”, Now on form submit i have appended it to form Data like this let formData = new FormData(); formData.append(‘start’, this.form.start); When i console i get date something like ..
I’m making project. In my project, I render several questions with answers on one page. here’s the code: <div v-for="question in laravelData.data" class="ticket-container" style="background-color: #2e3440; height: auto; margin-top: 10px;"> <div class="container-fluid ticket p-0 d-flex flex-column"> <img v-if="question.image !== null"class="img-fluid" :src="’assets/images/’ + question.image"> <div class="content text-light" > <div class="question m-2 p-2"> {{question.question}} </div> <div class="answers m-3 ..
I have methods that get the details of the item in my vue script. export default { methods: { productCardAction(product) { this.itemID = product.id; this.loadVariants(); }, loadVariants() { let item_id = this.itemID; axios.get("./itemDetails/" + item_id).then((response) => { this.variants = response.data.data.variants; }); } }, data() { return { itemID: ”, variants: [] } }, } but ..
How can i upload multiple images instead of one, uploading one image works now this is what i am using. I have uploaded many images with Laravel and blade, but with vue im not sure on how to achieve this Vue Template <input type="file" v-on:change="onImageChange" multiple /> In Vue Script onImageChange(e) { // console.log(e.target.files[0]); this.image ..
I am trying to figure out an approach to make this work. Initially what I have is an integrated payment service provider using Mollie. There are multiple functions that get called whenever someone is purchasing something. This is where the payment gets initiated: axios.post(‘/api/molliepayment’, { products, totalPrice, paymentMethod, isSingleProduct }).then(response => { window.open.location.href = response.data.data._links.checkout.href; ..
Web Development Company
Free Hosting Company
