i have this code in my master page. how this variable to be called in my vue template. i think the way i call the variable is wrong pls correct me
<script>
window.App = {!! json_encode([
'user' => Auth::user()->id,
]) !!};
</script>
and this is my vue template
<template lang="html">
<div class="chat-message" v-if="message.user_from == window.App.user">
<div class="chatright">
{{message.user_from}} {{message.msg}}
</div>
</div>
<div class="chatleft" v-else>
{{message.user_from}} {{message.msg}}
</div>
</template>
You will call it like so:
window.App.user.id
And by the way, in your master page you only need this:
<script>
window.App = {!! json_encode([
'user' => Auth::user(),
]) !!};
</script>
Related
Im learning laravel livewire but i encounter this problem, i followed the tutorial in youtube but i dont know what is the problem.
login.blade.php
I have this in form tag wire:submit.prevent="submit"
app.blade.php
#livewireStyles
<livewire:login />
#livewireScripts
Login Component
public $form = [
'username' => '',
'password' => '',
];
public function submit()
{
$this->validate([
'form.username' => 'required',
'form.password' => 'required'
]);
}
public function render()
{
return view('livewire.login');
}
I have same error.
My code is:
#if($errors->any())
<ul>
[laravel error loop]
</ul>
#endif
<div class="anything">
<form wire:submit.prevent="save">
....form tags....
</form>
</div>
It seems livewire not rendering any other html after perfectly closed, like above, after </ul> is closed, then the rest is no rendering
Then I change my code to:
<div class="anything">
#if($errors->any())
<ul>
[laravel error loop]
</ul>
#endif
<form wire:submit.prevent="save">
....form tags....
</form>
</div>
I wrap all elements in one <div>, in this case I use <div class="anything"> And it works!
My form rendered!
I'm new in components and alpine in laravel. I have data from controller $positions.
$positions = [
['id' => 1, 'content' => 'king'],
['id' => 2, 'content' => 'lord']
];
When I pass it to laravel blade. here is my code
<div class="row">
<div class="col">
#foreach($list as $key => $position)
<x-list :position="$position"/>
#endforeach
</div>
</div>
I have component name it <x-list/> with a prop position, and here is the code of my x-list component
<div class="red w-60 mb-1">
<div x-data="positionData()" class="relative">
<button #click="submit()" class="p-2">Submit</button>
</div>
</div>
<script>;
var position = #json($position);
function positionData() {
return {
submit() {
console.log(position);
},
};
}
</script>
It is just very simple code but when I click the submit button, the data I get is the last position
from the list ['id' => 2, 'content' => 'lord'], even I click position 1 the data I get is still position 2 data. I don't know what happen now. I try to search it in google to fix it but I can't find the right answer on this.
I think the issue in this case is that the positionData function is being overwritten on each iteration of x-list (since each of the components is creating a new window.positionData function).
To solve it you could do:
<div class="red w-60 mb-1">
<div x-data="positionData(#json($position))" class="relative">
<button #click="submit()" class="p-2">Submit</button>
</div>
</div>
<script>;
function positionData(position) {
return {
submit() {
console.log(position);
},
};
}
</script>
Specifically, you should probably move the <script></script> out of the x-list component so that it doesn't get re-created for each component (it should only be added to the page once).
I'm getting this error from vue
[Vue warn]: Property or method "product" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I'm not sure where I went wrong to get that error. Here is my code
Home.vue
<template>
<div class="container">
<h1>This is the product page</h1>
</div>
</template>
<script>
export default {
props: ['product'],
data() {
return {
}
},
mounted() {
console.log(this.product);
}
}
</script>
and this is my product.blade.php
<div class="row">
<div class="col-md-12 mt-5">
<div id="app">
<home :product="product"></home>
</div>
</div>
</div>
and this is in my ProductsController
public function show(Product $product)
{
return view('welcome', [
'product' => $product
]);
}
<home :product="{{ $product }}"></home>
The product is coming from the your controller and to use it in blade, you have to use {{ }}
I have two tables: Countries and Cities. Idea is to show the second dropdown when User has selected country and fill it with cities that correspond to selected country.
Unfortunately I cannot figure out how to pass retrieved values to form.
Values retrieved are below the country with id 21 is Norway :)
Selected { "country": "21", "CountrySelected": true, "cities": { "6": "Oslo", "11": "Lillehammer" } }
// My app.js
const app = new Vue({
el: '#events',
data: {
country:'',
CountrySelected: false,
cities:[],
},
methods: {
WhenCountryHasBeenSelected: function(event) {
this.getCities();
this.CountrySelected= true;
},
getCities: function(){
this.$http.get('api/cities/'+this.country).then(function (response) {
this.cities = response.data;
});
}
},
})
//My api.php routes
Route::get('/cities/{country_id}', function (Request $request, $country_id) {
$cities=App\City::where('country_id', $country_id)->get()->pluck('name','id');
return $cities;
});
//My blade file
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="events">
<div class="panel panel-default">
<div class="panel-heading">Select cities by country</div>
<div class="panel-body">
{!! Form::open() !!}
{!! Form::select('country', $countries, null, ['v-model'=>'country', '#change'=>'WhenCountryHasBeenSelected' ,'class'=>'form-control']) !!}
<div v-show="CountrySelected">
{!! Form::select('city',$cities, null, ['class'=>'form-control']) !!}
{!! Form::close() !!}
Selected #{{ $data | json }}
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
Ended up to use Laravel collection map feature. Mu route looks now like this
Route::get('/cities/{country_id}', function (Request $request, $country_id) {
$collection=App\City::where('country_id', $country_id)->get();
$cities=$collection->map(function($city){
return ['id' => $city->id, 'name' => $city->name];
})->toArray();
Long live Laracast forums and bashy :)
I'm a newbie in laravel 5.. and i don't know how to use button function.. I need to save the data in database but i don't know how to do it.. Thanks for the help!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Create</title>
<link rel="stylesheet" href="">
</head>
<body>
<div><input type="text" placeholder="Enter Name here" name="name"></div>
<div><input type="text" placeholder="Author" name="author"></div>
<div><input type="hidden" name="action_create"></div>
<div><textarea name="content" id="" cols="30" rows="10"></textarea</div>
<div><button type="button">Button</button></div>
</body>
</html>
this is my route
$router->get('create',['uses' => "TestController#create"]);
$router->post('create',['uses' => "TestController#store"]);
$router->get('edit/{blog_id?}',['uses' => "TestController#edit"]);
$router->post('edit/{blog_id?}',['uses' => "TestController#update"]);
$router->get('view',['uses' => "TestController#view"]);
$router->get('/',['uses' => "TestController#index"]);
public function store(InputRequest $input){
// return 'lkjlasd';
$new_blog = new Blog;
$new_blog->fill($input->all());
if($new_blog->save()){
echo "save success.";
}else{
echo "db communication error";
}
}
to start without creating a form will be unable to send anything on your form
The way is your not send anything
Index
<form method="POST" action="backend" accept-charset="UTF-8" name="InsertData" role="form">
<div><input type="text" placeholder="Enter Name here" name="name"></div>
<div><input type="text" placeholder="Author" name="author"></div>
<div><input type="submit" value="Insert"></div>
</form>
In your route:
Here you will call your action of your form eg "backend"
Route::get('backend','Controller#InsertData');
In your controller
The controller uses the eloquent in order to save the content in your database
public function updateSocial() {
$new_blog = Input::except('_token');
$validation = Validator::make($new_blog, Blog::$new_blog);
if ($validation->passes()) {
$new_blog = new Blog;
$new_blog->name = Input::get('name');
$new_blog->author= Input::get('author');
$new_blog->save();
Session::flash('insert', 'success');
return Redirect::to('backend');
} else {
return Redirect::to('backend')->withInput()->withErrors($validation);
}
}
In your model
Will draw variable and here is their validations
public static $new_blog = array(
'name' => 'required',
'author' => 'required',
);
I hope help you
Extending the anwser on #Jose Cerejo's answer:
Add {{ csrf_field() }} to the form.
What you doing with your routes is exacly the same as:
$router->resource('/', TestController::class);
Checkout the documentation here.
EDIT:
You could use Laravel Collective to do something like this:
{!! Form::open(['action' => 'TestController#store']) !!}
<div>
{!! Form::text('name', null, [ 'placeholder' => 'Enter Name here' ]) !!}
</div>
<div>
{!! Form::text('author', null, [ 'placeholder' => 'Author' ]) !!}
</div>
<div>
{!! Form::submit('Insert') !!}
</div>
{!! Form::close() !!}
It creates the form with the necessary hidden fields for you (like crsf token and a _method field for the update PUT requests)