I get popup showing are you sure you want to delet this data? But what i want is I want to make an axios call and fetch data inside that popup, asking where do you want to shift the data related to that data inside ? and show the dropdown? deleteBeacon(beacon) { swal({ title: "Are ..
Category : vue-component
I have an issue integrating the Vue.js template( Vue-Notus package here) into the empty Laravel project. How can I properly copy+paste from the template files into Laravel? Sourc..
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 }, ..
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders Sourc..
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) ..
I am new to Vue. I am using a vue component as follows & I am passing some objects through the components if available. <form :languages='{{ json_encode($languages) }}’ :items='{{ !empty($items) ? $items : "" }}’> </form> I am using this vue component for both create new entry and edit existing entry scenarios. so, this :items ..
I have a vue component for the form and onece I click the add new button It should load another vue component. following is the add new button. <button class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 mr-1" v-on:click="addNewBreedTranslate(product.id)"> Add new </button> Following is the componet which I want to load with above button click. ..
I have a store function as follows for the product edit, public function store(Request $request) { $this->validate($request, [ ‘name’ => ‘required’, ‘category_id’ => ‘required’ ]); if (!empty($request->product_id)) { $product = StoreProduct::findOrFail($request->product_id); $product->update($request->except(‘_token’)); session()->flash(‘flash_message’, ‘The product has been updated!’); return redirect()->route(‘product.index’); } } It is call by Vue component’s method as follows, methods: { saveProduct: function ..
I have a Vue component for form and there is a dropdown in that form as follows, <select class="block appearance-none w-full"v-model="this.languages" name="language_id"> <option v-for="language in languages" v-bind:value="(lan.id === language.id) ? lan.id : language.id" :selected= "lan.name"> {{ language.name }} </option> </select> It is using the same vue component for both create & edit. In edit, there ..
I have created route with "resource". When I try to use delete method it always going to show method. -Route Calll(in Vue component) <a class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text green-800"v-bind:href="’translate-breed/’ + breedDetail.id">Delete </a> Route List -Delete Method public function destroy(TranslateBreed $translateBreed) { $translateBreed->delete(); session()->flash(‘flash_message’, ‘The Breed has been deleted.’); return redirect()->route(‘translate-breed.index’); } ..
hi everyone I am new to this laravel framework and vue too I’m building an application for school management I want to get data from the database and display it in the vue component I use Axios to do that but when I run the code I have a son file instead of what I ..
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 ..
‘vue-stars’ was used to create a star rating system in my laravel 8 application. But stars are not loading into the view. <vue-stars name="demo" :active-color="#ffdd00" :inactive-color="#999999" :shadow-color="#ffff00" :hover-color="#dddd00" :max="5" :value="3" :readonly="false" :char="★" :inactive-char="" :class="" /> imported in app.js import { VueStars } from "vue-stars"; Output Sourc..
Im trying to create a test, each test has an image(file) and one or more questions, and each question has an (file) and one or more choices… each questions has questions_text and questions_file and questions_choices(array of objects) this is my data() function: data(){ return{ succees:false, numberQuestions:null, file:null, questions_counter:1, categories:[], form: new Form({ test_type:’1′, test_name:”, test_description:”, ..
It works fine when I use if for the first time after that I need to restart the server to see changes in the component Sourc..
Good afternoon first of all, I am currently developing an APP and to access a subsection within the general section I use an href that takes parameters from the parent object. scopes->father objectives->children <a href="{{ route(‘dashboard.objectives.edit’, [‘scope’ => $objective->scopes->slug, ‘objective’ => $objective->slug])}}" type="button" class="btn btn-info">Edit</a>. The problem is that I was able to achieve this ..
I’m working on creating reusable form inputs using vue + laravel. I have one prop that is required, and I pass it and it renders as expected, but the console still logs the error: "Vue warn]: Missing required prop: "inputId"". Inspecting the vue element shows the prop as defined. Why is an error being generated ..
So I am using vue-router in Laravel 7with bootstrap 5 app. I’m trying to create a SPA with laravel and vue i have tow page 1)dashoard 2)landing page i made router-vue and made app but it get landing page inside dashboard page for example http://localhost:8000/landing is in http://localhost:8000/dashboard how to separate it? hom.blade.php <body> <div ..
Im trying to pass an id with the v-model so i can pass that to my computed function. The purpose of my function is to dynamically filter a table without hardcoding the names in the function. my data is called guides, it has an title/active/language_id/group. this is my html dropdown: <select v-model="filterResult" class="select2-selection custom-select"> <option ..
I use Laravel, and I wan’t to pass parameters to the single page VUEJS component from blade.php template. <example-component :userName="{{ Auth::user()->name }}"></example-component > In my app.js file, I have a code: window.axios = require(‘axios’); window.axios.defaults.headers.common[‘X-Requested-With’] = ‘XMLHttpRequest’; window.Vue = require(‘vue’); import ‘es6-promise/auto’; import store from ‘./store’ Vue.component(‘example-component’, require(‘./components/ExampleComponent.vue’).default); const app = new Vue({ el: ‘#main’, ..
Here is my CategoryController.php code… public function name($id) { $f = Category::findOrFail($id); $nm = $f->name; return $nm; } Here is my router. Route::get(‘/category/{id}’, [CategoryController::class, ‘name’]); In vue.js I defined this in method, enter code here In the table, I need to get category name instead of category id. from URL I get category name but ..
I trying to check role of user login in vue js, I’m using vuex for store, I want to check if the role of user or admin logged push to admin for role = 1 and role = 1 be push to user but something is wrong with vuex for me. And my role is ..
I had a simple vue component in which I am fetching a question from Database in beforeMounnt() method but after making some changes I wanted to reload the currentQuestion data in my state and its’s working fine But the updated method keeps on fetching the new state from the state which is a performance pitfall ..
How to bind the data using axios (single axios call) from the query in Vue. I use laravel and Vue. Controller: public function getValue($project) { $tableA=TableA::all(‘project’); $tableB= TableB::all(‘question’); for( $i =0 ;$i <= count($tableA); $i++ ) { $actualCount = DB::table($tableA[$i]->project) ->selectRaw(‘SELECT * from ?’, [$tableA[$i]->project]) ->where([$tableB[$i]->question] ,’!=’ ,null) ->get(); } return view(‘pages’); } In Web.php ..
I had implemented a Review policy using @can method in my blade. DisplayProduct.blade @extends(‘layouts.app’) @section(‘content’) <display-product :product="{{$product}}"> </display-product> @endsection But now I wanted to convert my blade component to vue component, so exactly how can I implement My review policy in the vue component DisplayProduct.vue Component Snippet <div class="row"> <div class="review-content ml-3 my-3">{{review.content}}</div> <!– @can ..
Web Development Company
Free Hosting Company
