I am using vuejs cdn in my laravel blade file. Now, I want to bind v-model on my html input fields like text and select tag. here is my code how i am trying to use v-model on select tag. This process isn't working for me. thanks in advance
#section('script')
<script>
var app = new Vue({
el: '#purchaseApp',
data() {
return {
purchase_items:'',
supplier:'',
}
},
methods: {
},
});
</script>
#endsection
<div class="widget-content widget-content-area">
<div class="form-group row">
<label for="category" class="col-sm-2 col-form-label">Supplier</label>
<div class="col-sm-10">
<select name="supplier" v-model="supplier" class="form-control suppliers" >
<option value="" selected disabled>Select Supplier</option>
<option value="shibbir">shibbir</option>
<option value="ripon">ripon</option>
</select>
</div>
</div>
I have got the solution of problem. There I used select-2 plugin. For that reason, v-model wasn't working.
Related
I'm currently developing a website using laravel livewire
The website has a multi-site form page, and there's a dynamic dropdown on the inside of that multi-site form page
The problem is when the form is filled, it won't store the data into the database
When i do inspect the website there's an error that read :livewire multiple root elements detected
How do i fix this??
Livewire model :
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Kredit;
use App\Models\Biaya;
use App\Models\Produk;
use App\Models\Promo;
use App\Models\Motorcycle;
use App\Models\MotorcycleBrand;
use App\Models\Domisili;
class KreditMulti extends Component
{
public $brand_id;
public function render()
{
$domisilis = Domisili::all();
// $motorcycles = Motorcycle::all();
// $motorcycle_brands = MotorcycleBrand::all();
//for the dynamic dropdown
if($this->brand_id){
$motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
} else {
$motorcycle_brands = [];
}
return view('livewire.kredit-multi',
['domisilis'=>$domisilis])
->withMotorcycles(Motorcycle::all())
->with('motorcycle_brands', $motorcycle_brands);
}
}
The livewire blade php :
<div class="form-group row">
<label for="motorcycle" class="col-md-4">Merek motor</label>
<div class="col-md-6">
<select wire:model="brand_id" class="form-control">
<option value="" selected>Choose Motor</option>
#foreach ($motorcycles as $m)
<option value="{{$m->id}}">{{$m->motorcycle_name}}</option>
#endforeach
</select>
</div>
</div>
<br>
#if (count($motorcycle_brands) > 0)
<div class="form-group row">
<label for="motorcycle_brand" class="col-md-4 col-form-label text-md-right">Jenis Motor</label>
<div class="col-md-6">
<select class="form-control" name="motorcycle_brand_id">
<option value="" selected>Choose the motor version</option>
#foreach ($motorcycle_brands as $motor)
<option value="{{$motor->id}}" wire:key="motorcycle_brand{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
#endforeach
</select>
</div>
</div>
#endif
<br>
all livewire components must be start with a <div> and end with a </div>.
actually you must wrap the whole <div> and </div> s into a single <div></div>
Your blade code has several roots
1.- <div class="form-group row"....>
2.- <br>
3.- #if (count($motorcycle_brands) > 0)...#endif
4.- <br>
Enclose all that stuff in a single root
<div>
<div class="form-group row"....>
<br>
#if (count($motorcycle_brands) > 0)...#endif
<br>
</div>
The error is as exact as it can be. A Livewire component simply can only have a single root element. Instead, you're adding 2, including 2 breaks.
Wrap the whole component into a single <div></div>, and then it should be fixed.
public $motorcycle_brands,$domisilis,$brand_id,$motorcycles;
public function render()
{
$this->domisilis = Domisili::all();
$this->motorcycles = Motorcycle::all();
if($this->brand_id){
$this->motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
} else {
$this->motorcycle_brands = [];
}
return view('livewire.kredit-multi');
}
Blade
#if (count($motorcycle_brands) > 0)
<div class="form-group row">
<label for="motorcycle_brand" class="col-md-4 col-form-label text-md-right">Jenis Motor</label>
<div class="col-md-6">
<select class="form-control" wire:model="brand_id">
<option value="" selected>Choose the motor version</option>
#foreach ($motorcycle_brands as $motor)
<option value="{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
#endforeach
</select>
</div>
</div>
#endif
I have a new project and I want to load in a Vue Component an array from view of Laravel.
For testint I have the same html element, SELECT, created by two ways: Laravel and Vue Component.
The html code:
<!-- Laravel SELECT Element -->
<div class="form-group">
<label for="customer">Client</label>
<select
name="customer"
class="form-control #error('customer')
is-invalid
#enderror"
id="customer">
<option value="">-- Seleciona -</option>
#foreach($customers as $customer)
<option
value="{{ $customer->id }}"
{{ old('customer') == $customer->id ? 'selected' : '' }}>{{ $customer->customer_name }}</option>
#endforeach
</select>
#error('customer')
<span class="invalid-feedback d-block" role="alert">
<strong>{{$message}}</strong>
</span>
#enderror
</div>
<!-- End Laravel SELECT Element -->
<!-- Vue Component SELECT Element -->
<create-task-jobs v-bind:customers={{ json_encode($customers) }}>
</create-task-jobs>
<!-- End Vue Component SELECT Element -->
The Vue Component code:
<template>
<div>
<form #submit.prevent="agregar">
<h3>Afegir Tasques</h3>
<b-form-group id="input-group-3" label="Client" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.customer"
:options="customers_load"
required
></b-form-select>
</b-form-group>
<button class="btn btn-primary" type="submit">Agregar</button>
</form>
</div>
</template>
<script>
export default {
props: {
customers: Array
},
data() {
return {
form: {
customer: null,
},
customers_load: [{ text: 'Select One', value: null },...this.customers]
}
}
}
</script>
The SELECT in Laravel works fine, show the customer_name and the id correctly but the problem is in the Vue Component the values of the SELECT are null:
The array into the component is null and I don't sure what is happen.
UPDATED:
Array object dd:
Thanks!
Try this one with little changes,
<create-task-jobs v-bind:customers={{ json_encode($customers->pluck('customer_name', 'id')) }}></create-task-jobs>
As it will not make key value pair. You will understand it by dd $customers
I want to when a user select a dropdown from the list, a group of subjects available for that grade must be displayed with checkboxes next to them
My controller
public function create()
{
$grades = Grade::with('subjects')->orderBy('slug', 'asc')->get();
return view('admin.users.create', compact( 'grades'));
}
Blade file
<div class="form-group">
<select id="grade" name="grade" class="form-control #error('grade') is-invalid #enderror" v-model="selectedSubjects">
<option value="">Choose a Grade...</option>
#foreach($grades as $grade)
<option value="{{ $grade->id }}" {{ old('grade', $grade) == $grade->name ? 'selected' : "" }}>{{ $grade->name }}</option>
#endforeach
</select>
</div>
<div class="custom-control custom-checkbox mt-2">
#foreach($grade->subjects as $subject)
<input type="checkbox" class="custom-control-input" id="{{$subject->slug}}" name="subjects[]" :value="selectedSubjects" />
<label class="custom-control-label" for="{{$subject->slug}}">{{$subject->name}}</label>
#endforeach
</div>
vue
<script>
window.addEventListener('load',function(){
var app = new Vue({
el: '#app',
data:{
selectedSubjects: {!! $grade->subjects->pluck('name') !!},
}
});
});
</script>
THIS IS IMPOSSIBLE... I GIVE UP
As per I have understood, you want to select grades from dropdown & show its corresponding checkbox as per subjects for the grades.
I would suggest to create a vue component for that lets say grades-component,
in your blade you can add,
<form action="" class="form-control">
#csrf
<grade-component :grades='#json($grades)'></grade-component>
</form>
here in blade, $grades is the object(or array) you are passing via compact. Basically it is to pass your data to the component, we will use that with help of props.
Now you can add your GradeComponent.vue in resources->js->components->GradeComponent.vue
GradeComponent.vue
<template>
<div class="container">
<select v-model="selected_grade" #change="onChange($event)">
<option v-for="grade in grading" :value="grade.slug">{{grade.name}}</option>
</select>
<div class="custom-control custom-checkbox mt-2" v-if="subjects !== null" v-for="subject in subjects">
<input type="checkbox" :id="subject.slug" :value="subject.slug"/>
<label :for="subject.slug">{{subject.name}}</label>
</div>
</div>
</template>
<script>
export default{
props: ['grades'],
data: function() {
return {
grading: this.grades,
selected_grade: null,
subjects : null
}
},
methods: {
onChange(event) {
this.grading.forEach((obj, index) => {
if (obj.slug === event.target.value){
this.subjects = obj.subjects;
}
})
}
}
}
</script>
Now finally you can add it in app.js
Vue.component('grade-component', require('./components/GradeComponent.vue').default);
Then compile your vuejs code, I would use npm run watch
A similar one but with fake data, you can see https://jsfiddle.net/bhucho/2yu4nmws/3/,
In my project i have some events, each with a number of tags.
These tags are defined by the administrator user.
Some of these tags may have parameters.
For example, an email tag has two "Sender" and "Receiver" parameters.
Or the transfer tag has 2 parameters "From" and "To". and etc.
Do I have to use the form builder?
How do I implement this using Laravel and Vuejs?
Use Vue JS Component in Laravel like this.
Create Contact.vue component inside resources\assets\js\components then place your Vuejs there.
<template>
<div>
<h1>Contacts</h1>
<form action="#" #submit.prevent="createContact()">
<div class="form-group">
<label>Name</label>
<input v-model="contact.name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label>Email</label>
<input v-model="contact.email" type="text" name="email" class="form-control">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">New Contact</button>
</div>
</form>
</div>
</template>
<script>
export default {
data: function(){
return {
contact:{
name:'',
email:'',
}
}
},
methods: {
createContact: function(){
//call axios to submit the form values in your Laravel controller method
let self = this
axios.post('/contact/store', params)
.then(function(){
self.contact.name = '';
self.contact.email = '';
})
.catch(function(error){
console.log(error);
});
console.log(this.contact);
return;
}
}
}
</script>
In app.js file inside \resources\assets\js add the component
Vue.component('contacts', require('./components/Contacts.vue'));
Finally, call the contacts component inside your blade file.
<div class="container">
<div id="app">
<contacts></contacts>
</div>
</div>
I have a page with a select option
<div class="col-md-7">
<select class="selection" name="selection">
<option value="ab">Form One</option>
<option value="ad">Form Two</option>
<option value="nq">Form Three</option>
</select>
</div>
<div id="content"></div>
For my JQuery, I just listen for the change
$(".selection").on("change", function(e){
if($(this).val() == "ad"){
$("#content").append(data);
}
});
Now where this blade template lives (resources/views/customer), I have created a forms folder. In this folder are form1.blade.php and two more templates for the other forms.
How would I go about added the form template into the div with the id content?
Or is there a better way of handling multiple forms for a single page?
Suppose, you have two forms like this:
View :
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form1">Submit 1</button>
</form>
<form action="/url" method="post">
<input name="some_field" value="1">
<button type="submit" name="form2">Submit 2</button>
</form>
Now in Controller :
if ($request->has('form1')) {
//handle form1
}
if ($request->has('form2')) {
//handle form2
}
Source: https://laracasts.com/discuss/channels/laravel/two-form-on-one-page-both-submit
Assign values to submit and check to see if $request->has() the value. Then use logic inside the controller.
Just add an id to the form you wanna submit.
<script>
$(document).on("click","#formPass",function() {
$(this).parents("form").submit();
});
</script>