I am trying that from controller pass values (from database column),
to vue.js component (for select option in v-for), but when I send from controller to blade and get as prop in vue.js and put as data, I get every character in json as one select option.
How I can fix that to work properly and to put json object in v-for select?
RolesController.php
$roles = Roles::all('name');
return view('users.create', ['users' => $users]);
And in the blade I pass value to vue component:
<users-add
roles="{{$roles}}"
></users-add>
My UsersAdd.vue:
<select>
<option v-for="role in roles" :value="role">
{{role}}
</option>
</select>
But I get every character in the list from json in the select, instead to get every role name in every select row.
For example I get:
{
"
n
a
m
e
"
:
"
m
o
d
e
r
a
t
o
r
"
Instead
moderator
Assuming you have a function in your RoleController that looks similar to the following:
public function index()
{
$roles = Role::all('name');
$users = User:all(); // or however you're obtaining your users
return view('users.create', compact('roles', 'users'));
}
In your users.create blade template, you want to have the following:
<users-add :roles="{{ $roles }}"></users-add>
Note the colon (:) before the roles prop.
Then in your UserAdd vue component, something like the following should work for you:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<label for="role">Role</label>
<select id="role" name="role">
<option v-for="role in this.roles" :value="role">
{{ role.name }}
</option>
</select>
</div>
</div>
</div>
</template>
<script>
export default {
props: [
'roles'
]
}
</script>
Related
I am trying to fetch country codes from my database and trying to get the default value via IP address. It works just as I want for a second but then I don't know what happens but it refreshes itself and scrolls to the first option instead of the selected option.
Livewire Controller Component
use App\Models\CountryCodes;
use Livewire\Component;
use Location;
class TestCountry extends Component
{
public $iso;
public $country_codes;
public $country_code;
public function mount()
{
$iso=Location::get('ip');
$this->iso=$iso->countryCode;
}
public function render()
{
return view('livewire.test-country',[
$this->country_codes = CountryCodes::select('nicename','iso','phonecode')->get()->toArray()
]);
}
}
Livewire Blade Component
<select wire:model.lazy="country_code" name="country_code" id="country_code" class="form-control" required>
#foreach($country_codes as $country_code)
<option value="{!! $country_code['iso'] !!}"
wire:key="{{$country_code['iso']}}"
{{ $country_code['iso'] == $iso ? 'selected' : ''}}>
{!! $country_code['iso'] !!} +{!! $country_code['phonecode'] !!}
</option>
#endforeach
</select>
This code does select my default option but it changes and moves to the first option automatically. Am I doing something wrong here?
I believe what is happening is, $iso is set correctly, but the select is bound to the $country_code property, not $iso, so briefly, the check you have works, but because $country_code doesn't have a value, the selected option is lost when the state is updated by Livewire.
TLDR: Livewire is checking whatever is in the wire:model attribute, so the class property must be set for it to work.
I would try something like this:
public function mount()
{
$iso = Location::get('ip');
$this->iso = $iso->countryCode;
// set $country_code to $iso
$this->country_code = $this->iso;
}
I believe Livewire will intelligently select the state, so I think the selected check can be removed:
<select wire:model.lazy="country_code" name="country_code" id="country_code" class="form-control" required>
#foreach($country_codes as $country_code)
<option
value="{!! $country_code['iso'] !!}"
wire:key="{{$country_code['iso']}}"
>
{!! $country_code['iso'] !!} +{!! $country_code['phonecode'] !!}
</option>
#endforeach
</select>
Also, any reason for using {!! !!} tags in the view rather than just {{ }}?
I am trying to pass a value from the <option> of my <select> input to my livewire controller component and echo the value.
Livewire Blade View Component:
{!! Form::select('goals',$goals_plucked,null,[
'placeholder' => trans('classes.backend.forms.select_goals'),
'class' => 'custom-select',
'id' => 'goals',
'wire:change' => "goals(this.val)",
]) !!}
This get's me an output of null in my Livewire Controller Component
Livewire Controller Component
public $goals;
public function goals($goals)
{
dd($goals);
}
After watching some tutorials. I also tried using 'wire:change' => "goals($event.target.value)", which gave me an error of Undefined variable $event, obviously because it was not defined in main controller. I am not sure what am I doing wrong here.
What I am trying to do: Trying to create a flow just like select country then select state and then select city. via livewire. Before selecting a country the inputs of the select state and city won't be visible
I tried below code and it worked for me well. Just had to make sure I use normal html form inputs and dynamically add options to it by foreach loop. Also used mount() function for getting getting values and id's for select dropdowns.
Livewire Blade View Component:
<select wire:model="goal" name="goal" class="form-control" required>
<option value="">
{!! trans('classes.backend.forms.select_goals') !!}
</option>
#foreach ($goals as $goal)
<option value="{{ $goal->id }}">{{ $goal->goals }}</option>
#endforeach
</select>
Livewire controller component
public $goals;
public $goal;
public function mount()
{
$this->goals = Goals::all()->isActive();
}
public function updatedGoal($value)
{
dd($value);
}
just give wire:model="variable_name" to select in front end.
and in livewire controller there should be a public variable with same name. it will automatically get the value on select value change.
below is the example of same
<select class="custom-select border-0 shadow-none" id="enquiry_for" wire:model="enquiry_for">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
My Tables:
kategoris table
id | kode_kategori | kategori_name |
items table
id | kategori_id | item_name
In items table the kategori_id column has foreignkey.
My Controller:
public function edit($id)
{
// $item = Item::findOrFail($id);
$item = DB::table('items')
->join('kategoris', 'items.kategori_id', '=', 'kategoris.id')
->where('items.id', '=', $id)
->select('items.*', 'kategoris.*', 'items.id', 'items.kategori_id')
->get();
// dd($item);
return view('master-dev/item/edit', compact('item'));
}
My View:
<div class="card card-default">
{{ Form::model($item,['route'=>['item.update',$item['id']], 'files'=>true,'method'=>'PUT']) }}
<div class="card-header">
<h3 class="card-title"><b>Edit Data Item</b></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body">
#if(!empty($errors->all()))
<div class="alert alert-danger">
{{ Html::ul($errors->all())}}
</div>
#endif
<div class="row">
<div class="col-md-6">
<div class="form-group">
{{ Form::label('kode_kategori', 'Kode Kategori') }}
<select name="kode_kategori" id="kode_kategori" class="form-control">
#foreach ($item as $i)
<option valu="{{ $i['kode_kategori'] }}">{{ $i['kode_kategori'] }}</option>
#endforeach
</select>
</div>
</div>
..........
..........
{{ Form::close() }}
I've tried any solutions in stackoverflow such as adding (ifempty...) and other solution but still the result Undefined index: id in my edit blade. When I was trying using dd and vardump the results was shown. I need to loop the foreach in my dropdown menu to show the list of data from my categories table. And I need to join my items table and my categories table to get the name of the categories.
you are calling same id from items and kategoris try this
public function edit($id)
{
// $item = Item::findOrFail($id);
$item = DB::table('items')
->join('kategoris', 'items.kategori_id', '=', 'kategoris.id')
->where('items.id', '=', $id)
->select('items.*', 'kategoris.id as kategory_id', 'kategoris.kode_kategori', 'kategoris.kategori_name')
->get();
// dd($item);
return view('master-dev/item/edit', compact('item'));
}
if this answer doesnot work show your database relation i will give you solution
$item = ....->get() will return a Collection to only have one item you need to use $item = ....->first() instead
But since you have #foreach ($item as $i) I believe, you still want to have a collection, but in that case, your issue is here
{{ Form::model($item,['route'=>['item.update',$item['id']], 'files'=>true,'method'=>'PUT']) }}
Since you have a collection, we don't know what $item['id'] it's referring to. Perhaps $item->first()['id'] ?
I solved the problem, there's a conflict fetching data from items and kategoris tables. There are differences calling a value with array and object, mostly if its data looped. So in the controller I must declared one by one, the selected value id from kategoris table, and I have to join both tables to get the name of the kategoris, and then I have to declare once more to get the list of the kategoris data. So there are three (3) variables to declare each one of them. For this long time I was looking for the short code in my Controller but I cannot find it.
Thank you for all of you guys helping me this problem. Cheers.
I want to get all of the data from sparepart database using all() function, then use foreach in view to access the data, but I keep get that error. It works fine when I use the same method for other view blade.
Controller
public function LaporanSisaStok(Request $request) {
if($request->kode == "")
{
$spareparts = Sparepart::all();
return view('laporan/sisaStok')->with(['spareparts' => $spareparts]);
}
else {
$query = DB::table("historisparepart")->select(DB::raw('EXTRACT(MONTH FROM tanggal) AS Bulan, SUM(jumlah) as Sisa'))
->where('kodeSparepart', $request->kode)
->groupBy(DB::raw('EXTRACT(MONTH FROM tanggal)'))
->get();
return view('printPreview/sisaStok', ['data'=>$query]);
}
}
View
<form method="POST" action="{{ route('laporan.sisaStok') }}" enctype="multipart/form-data">
#csrf
<div class="form-group-row">
<label for="sparepart" class="col-sm-2 col-form-label">Sparepart</label>
<select class="custom-select" id="kode" name="kode">
<option value="">-Pilih Sparepart-</option>
foreach($spareparts as $sparepart)
{
<option value="{{$sparepart->kodeSparepart}}"> {{$sparepart->namaSparepart}} </option>
}
</select>
</div>
<br>
<button type="submit" class="btn btn-info"><i class="oi oi-task"></i> Cari </button>
You aren't looping through anything. You need to give the foreach() method a variable from your spareparts collection. I think it might help you avoid confusion, to name the collection variables plural:
In your controller:
$spareparts = Sparepart::all();
return view('laporan/sisaStok', compact('spareparts'));
Then, most importantly, you need to tell foreach what it should produce. In your view, change:
foreach($sparepart)
to
#foreach($spareparts as $sparepart)
Don't forget you are in blade, so use the # before the foreach. Then, assuming you actually have a property on the spareparts model called kodeSparepart, this should work fine.
This is not a looping syntax in the laravel view
foreach($spareparts as $sparepart)
{
<option value="{{$sparepart->kodeSparepart}}"> {{$sparepart->namaSparepart}} </option>
}
It should be like this
#foreach($spareparts as $sparepart)
<option value="{{$sparepart->kodeSparepart}}"> {{$sparepart->namaSparepart}} </option>
#endforeach
And another problem is you are passing the data in wrong way. It should be like this
return view('printPreview/sisaStok', ['spareparts'=>$query]);
You shoud use the plural of your dtb name to loop over the values so your 'sparepart' variable should change to 'spareparts'
$sparepart = Sparepart::all();
return view('laporan/sisaStok')->with(['spareparts' => $sparepart]);
In your view change your loop to the new variable and loop using your current variable, so your view shoul look like this:
View
<div class="form-group-row">
<label for="sparepart" class="col-sm-2 col-form-label">Sparepart</label>
<select class="custom-select" id="kode" name="kode">
<option value="">-Pilih Sparepart-</option>
#foreach($spareparts as $sparepart)
{
<option value="{{$sparepart->kodeSparepart}}"> {{$sparepart->namaSparepart}} </option>
}
#endforeach
</select>
</div>
I am new to laravel, I need a dropdown list, then select one option, and click search button to show the result.
Controller: index shows all tutors to be select, then when select it, pass the value to the select_tutor_page.
public function index()
{
$tutors = Tutor::all();
return view('home', ['tutors' =>$tutors]);
}
public function selectTutor(Request $request, $tutorId)
{
// $tutorId = Input::get('selectTutor');
// i think should use input to get the value, but it get error with:Trying to get property of non-object (View: E:\xampp\htdocs\appointment\resources\views\selectTutor.blade.php)
$tutor = Tutor::find($tutorId);
return view('selectTutor',['tutor' => $tutor]);
}
Home page view：
<form action="" method="POST" id="tutors">
{{ csrf_field() }}
<select class="form-control" name="selectTutor" id="selectTutor" data-parsley-required="true">
#foreach($tutors as $tutor)
<option value="{{ $tutor->id }}">{{ $tutor->name }}</option>
#endforeach
</select>
select
</form>
Select tutor page:
<h1>{{$tutor->name}}<h1>
Route:
Route::get('/home', 'HomeController#index')->name('student.home');
Route::get('selectTutor/{tutorId}', 'HomeController#selectTutor')->name('select.tutor');
please help....
This should work for you:
$tutorId = $request->selectTutor;
You can see all current request data if you add this line to your controller:
dd($request->all());
Also, to make it work, you'll need to add an action to the form:
<form action="{{ url('selectTutor/'.$tutor->id) }}" method="POST" id="tutors">
And submit this form with submit button instead of creating a href link.