There is an existing Livewire component and its corresponding blade file in the code structure.I want to create a new Laravel Controller and blade file.The blade files include variables that are defined in the Livewire component so when I return the newly created blade file from the new Laravel controller it shows undefined variable error.Is there any way to pass the variables defined in Livewire component in the newly created blade file?Also is there any alternative to this approach?
This is the blade file and the variable.
#if($variable)
#endif
This variable is defined the livewire component.
public $variable=false;
And the newly created controller is returning the above mentioned blade file.
Well I can't give you any definite answer because no code was posted and I don't know what your aim is
But if you really do need to pass variables to the new blade file, you can look into livewire browser events
https://laravel-livewire.com/docs/2.x/events
You can dispatch a browser event in the child component and listen for it in the parent
I once did this in a project of mine
$this->dispatchBrowserEvent('nationality-updated',['nationality' => $this->nationality]);
$this->dispatchBrowserEvent('state-updated',['state' => $this->state]);
And I listened to it in a parent component like this
<script>
window.addEventListener('nationality-updated',event => {
#this.set('state.nationality', event.detail.nationality)
})
window.addEventListener('state-updated',event => {
#this.set('state.state', event.detail.state)
})
</script>
Note that state.nationality is a livewire variable I accessed from Javascript and I'm not quite sure if that is optimal
But if you must you can follow the above
Related
I've got a menu that is visible in the entire website, separated in a section that i call in every layout that i made :
<select class="custom-select">
<option>All categories</option>
<option>Bakery</option>
<option>Fruits</option>
<option>Eggs</option>
<option>Sweets and Chips</option>
<option>hygiene</option>
<option>Kitchenware</option>
</select>
Is there a simpler way to load and fill the options directly from the Blade template instead of calling the controller in every view that i make just to fill the menu?
If this is something you want to use in many different places,you could create a blade component and/or a view composer to load the data.
In Symfony I am using widget-like behaviour by calling controller method from twig
{{ render(controller(
'App\\Controller\\ArticleController::recentArticles',
{ 'max': 3 }
)) }}
It does the logic and returns another twig template, which is embeded here.
How in the Laravel do people solve this? I need this for displaying menu, responsive menu, product lists, breadcrumbs etc.
I have read about View composers and studied the documentation - but there's mentioned only how you can inject some variables into the view.
The same with using #inject() in blade.
But I want standalone widget (with own logic, data fetching...) with custom blade template embeded/inserted in any place I call them from.
Thanks for an advice.
Btw. It doesn't need to be Controller that I call, it could be a Service object. But the point is the same. I was personally calling these objects like _WidgetController (beginning with underscore - to tell me, they are not fully qualified views, but components/widgets). But I placed them into my Controllers folder.
I have a button (anchor tag) in a VueJs component, when clicked, it routes to another page, loading a laravel blade view.
Inside vueJs component
Checkout
This route returns a laravel blade file.
Route::get('/checkout', function(){
return view('checkout');
});
Now I have a data property in my vueJs component which I would need to use in checkout blade view. How do I pass this data from vueJs component to Laravel blade view.
NB: I'm familiar with passing data from laravel to VueJs but not the reverse.
first of all the way you are trying, anchor tag is not a good way. and I donw know How Many data you need to send so I can suggest simple and easy way which is params.
suppose you need to send data id, name, address.
<a :href="'/checkout?id='+id+'&name='+name+'&address='+address">Checkout</a>
and in laravel
Route::get('/checkout', function(Request $request){
$data=$request->all()
return view('checkout')with('data',$data);
});
is it possible to know which BLADE page you are on? I would like to include a different menu where my VIEW is the MAIN, how can I do this in the template? I check if it is my MAIN and add my different menu there if in case. example: #if(config('page.layout') == 'top-nav');
Is that possible? but with another code, of course
To me it seems like you are thinking with the wrong way. You should know what(which controller, which method) has loaded that view instead of what is this view. And you can pass control variables from there if you want.
In you question, the example you have shown:
#if(config('adminlte.layout') == 'top-nav')
So top-nav is coming form config adminlte.layout which has no relation with blade template or anything else. You can definitely do that if you set your config file based on your intention.
I wanted to pick up which file or URL my BLADE was, I got it this way:
#if(Route::current()->getName() == 'name') ....
##codeHTML
#endif
Currently Im working with Laravel and Vue, and now I want to use a 3rd party javascript library for tag-input fields. https://github.com/xoxco/jQuery-Tags-Input
I have to initialize the field in javascript by calling:
$('#tags').tagsInput();
However the tag-input field is inside of my vue component. I have tried calling this line from vue but that is not working.
Now I want to know which options do I have? Can I declare a function on my javascript and call that from within the Vue component? Can I pass the entire thing as a variable? Or are there other solutions to this case?
Someone who has experience with this and perhaps knows the right steps I have to take? Thanks in advance.
You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('#tags')).tagsInput();
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag