Category : vue-component

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

Read more

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

Read more

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

Read more

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

Read more

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’); } ..

Read more

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

Read more

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

Read more

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:”, ..

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more

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

Read more