Category : vuejs2

i have a problem with my vue component when i’m trying to update a product it returns an error put method is not supported… But it should be supported. my EditProduct.vue <form @submit.prevent="submitForm"> <div class="form-group row"> <label for="name" class="col-md-4 col-form-label text-md-right">Name:</label> <input type="text" name="name" id="name" v-model="product.name"> </div> <div class="form-group row"> <label class="col-md-4 col-form-label text-md-right">Description:</label> <textarea ..

Read more

[Laravel 8, vue 2, axios] I have a vue app installed on app.subdomain.domain.com and the laravel backend on subdomain.domain.com. All working fine. I created another parallel install, on app.subdomain2.domain.com and laravel on subdomain2.domain.com, and i keep getting CORS issues even though i am using same vue frontend and same laravel backend. I installed the backend ..

Read more

The following code of inertiajs with vue only works this way computed: { flash: function () { if (this.$page.props.flash.message) { this.$toast.open({ type: this.$page.props.flash.type, message: this.$page.props.flash.message.message, }) } return this.$page.props.flash.message } }, watch: { flash: function (newVal, oldVal) { } }, but if i remove the watch part, it doesn’t work. Also if i put the ..

Read more

I am trying to download pdf file from Laravel api with vue front end. Here is my vue code methods: { downloadAttachment(file) { axios({ url: ‘http://localhost:8000/storage/app/public/files/owwhz8JkFjyTuE4SNMytTKjXbVWLLIkaPnaSUF9b.pdf’, method: ‘GET’, responseType: ‘blob’, // important }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement(‘a’); link.href = url; link.setAttribute(‘download’, ‘file.pdf’); document.body.appendChild(link); link.click(); }); } } Now ..

Read more

I have a problem with vue-draggable with elements not going to their precise end element, Here’s a video to demonstrate the problem: https://imgur.com/a/gsv5rDw As u can see, Sometimes it works; othertimes, it does not. Cardlist.vue <template> <div class="p-3 w-80 flex-shrink-0 bg-gray-100 rounded"> <div class="flex justify-between" v-if="editingCardlist === false"> <div class="text-gray-700 font-semibold font-sans tracking-wide text-sm" @click="startListEditing">{{ ..

Read more

This is a new-comer question. I have a Blade template: <div id="app"> <example-component :componentMessage="appMessage" ></example-component> </div> <script> var app = new Vue({ el: "#app", data: function() { return { appMessage: {{$message}} } } }) </script And a Vue component ExampleComponent.vue <template> <p>{{componentMessage}}</p> </template> <script> export default { props: [‘componentMessage’], } </script> So the data flow ..

Read more

anyone knows how to submit file with bootstrapVue file input? I am getting null from request->all() array:13 [ … "calibration_cert" => array:1 [ "$path" => null ] ] Below is what I tried <b-form-group label="Calibration Cert:"> <b-form-file v-model="form.calibration_cert" :state="Boolean(form.calibration_cert)" placeholder="Choose a file or drop it here…" drop-placeholder="Drop file here…" ></b-form-file> </b-form-group> ….. methods:{ onSubmit(event) { ..

Read more

‘laravel8 + vue3 error Uncaught TypeError: Cannot read properties of undefined (reading ‘component’) how can this error be avoided ? app.js window.Vue = require(‘vue’).default; Vue.component(‘hello’, require(‘./hello.vue’).default); const app = new Vue({ el: ‘#app’ }); welcome.blade.php <body class="antialiased"> <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0"> <div id="app"> <hello></hello> </div> </div> <script src="{{mix(‘js/app.js’)}}"></script> ..

Read more

Background: I added TypeScript support to my existing project, so I added ts-loader and typescript. I think, I configured everything right and it is working fine in dev and prod mode. I would like to update gradually, keeping all the JavaScript code in place and using TypeScript for everything new or where there is a ..

Read more

Problem I am currently trying to download a dwg file that is privately stored in Laravel storage. I am doing it on a blade with an a tag that triggers a controller method and that is working properly. I am now trying to implement the same functionality in a Vue template with an axios call ..

Read more

I’m using vue.js and laravel when i open edit page i get this error in my console but Update function is called on button click and bill url is also called multiple times without parameter on mounted function app.js:1088 GET http://localhost:8000/api/userbackend/bill/undefined 404 (Not Found) POST http://localhost:8000/api/userbackend/Update 429 (Too Many Requests) Code Snippet: async mounted(){ this.roleid ..

Read more

I am using Laravel 8 and InertiaJS (Vue js) I am using the html2pdf.js to generate PDF. So I create a component for that : ExportPdf.vue So here is the code of the component ExportPdf.vue : <template> <div> <button class="px-6 py-3 rounded bg-gray-600 hover:bg-gray-900 text-white text-sm font-bold whitespace-no-wrap" @click="exportToPDF">Expot to PDF </button> </div> </template> <script> ..

Read more

Making chat in laravel 8 / beyondcode/laravel-websockets 1.12 / laravel-echo 1.11.1 / pusher-js 7.0.3 app when I failed to to catch whisper event. Reading here https://laravel.com/docs/8.x/broadcasting#receiving-broadcasts I do in my vue file : <template> <div class="container"> <div class="row" v-if="currentRoom"> <h4>{{ currentRoom.name }}</h4> <div class="col-sm-12"> <div class="table-responsive" v-if="is_page_loaded && messages.length"> <table class="table table-striped text-primary"> <tbody> <tr ..

Read more