I working with vue.js inside laravel blade ,
I want to parse my product id (vue.js variable) to laravel routing function parameter I tried more than solutions but it doesn't work like:
<form action="{{ route('cart.add', #{{this.productID}}) }}" method="POST">
please, help me
thanks
This won't work, as PHP is Pre-processor, it will render first, JS doesn't execute before that.
Instead of that you can replace your value with pattern, and replace that pattern using JS.
<form action="{{ route('cart.add', ['__ID__']) }}" method="POST">
Now before submitting, you can read URL of action using JS and replace it with the value of your VueJS variable.
You cannot access your vue variables in your blade file. What you should do is move your <form> inside a Vue component and use the variable there. And to be able to use your laravel named routes in .vue files you can use this package.
Related
I'm trying to pass a vue slot property within a wordpress function inside of the laravel brackets "{{ }}" to just get an image. Here is what I'm trying to do:
style="background-image: url({{ get_the_post_thumbnail_url(`slotProps.slide.ID`) }})"
Now it's just returning the wrong post thumbnail url. I've read something about using #{{}} to access the vue slot property within your blade template.
So I was trying to do it like:
style="background-image: url({{ get_the_post_thumbnail_url(#{{slotProps.slide.ID}}) }})"
which led into blade thinking there's a missing closing tag. How will I be able to get the correct thumbnail url using vue and blade?
Any help would be appreciated.
How can I create a list in laravel (v7) blade using the VueJS v-for method?
inside home.blade.php:
<template v-for="(item,index) in this.list">
<qm-item number="#{{index}}"></qm-item>
</template>
in the source code this results in:
<qm-item number="index"></qm-item>
but i would like to have number=0 or =1 on the first qm-item, number=2 on the second and so on.
UPDATE: the issue was how I was checking it, since the DOM is re-rendered I cannot check in the browser source code for this, because this won't be up to date.
You should bind the number as follows:
<qm-item :number="index"></qm-item>
You need to bind number:
<template v-for="(item,index) in this.list">
<qm-item :number="index"></qm-item>
</template>
index will be defined on the Vue.js side, not on the Laravel side.
When you pass data from blade to your Vue component you have to bind the props with a leading :
So, in your case, it should be <qm-item :number="{{index}}"></qm-item>
Also, use variable just like you normally do in the blade.
How can I add a variable to the form action in Laravel Vue Component?
<form method="POST" action="/thoughtjournal/{{id}}/update">
First, you might want to use Vue models and Axios to submit your form from Vue. It's kind of one of the magical parts of working with Vue.
However, to answer your question you need to bind the action attribute using js, so you need to create a variable in the Vue's data array of id and then use the following:
<form method="POST" :action="'/thoughtjournal/' + id + '/update'">
Again, tough, that is very much not how you should be working in vue. Instead you should use v-model biding to build up/edit the thought journal model, then post or patch it using axios.
I would like to use i18n in both blade.php and vuejs views. Is it possible?
I already made the json file for i18n, it looks like this:
export default {
"en": {
"menu": {
"home":"Home",
"example":"Example"
}
}
}
It works with vuejs but I wonder how to use it in laravel... Is this possible?
Otherwise, is there any way to access a cookie in both laravel and vuejs, or do I need to use axios request for storing it and get it in vue? (I would like to store and read use the lang).
Here is a blade.php view where I would like to use i18n
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('home.example') }}</a>
</li>
#endif
In vue.js files, all I do is
{{ $t('home.example') }}
I use this library: https://github.com/kazupon/vue-i18n
Thank you very much!
I don't think it's easily possible to use vue-i18n in Blade templates.
Blade templates allow you to use an # symbol in front of curly braces ({{ and }}) to indicate that the expression should not be evaluated by Blade. I wanted to suggest you use that to your advantage and use # {{ $t('home.example') }} inside Blade. I think it would have to be inside your Vue mounted element for Vue-i18n to pick it up. However, Vue replaces the mounted element since Vue 2.x so your Blade templates inside your Vue mounted element would probably get lost.
I think your best bet would be to use a generator to copy all of your Laravel translation strings to Vue-i18n. laravel-vue-i18n-generator
looks like a nice package to do this.
Basically you would then store your translation strings in Laravel and would be able to use them in Blade as normal. Every time you update these strings, you would have to run the generator again to have them available in Vue-i18n where you can access them as usual with Vue-i18n.
How to prevent Vue.js from running code within the < code > tags produced by markdown? It's a Laravel 5.5 + Vue.js 2.x project with 'andreasindal/laravel-markdown' package for markdown. The code that's Vue is trying to run is actually a Laravel Blade directive and it seems that Blade itself doesn't try to process it (since I'm getting a Vue error regarding this in the console).
{{ session('notificationType') }}
I tired modifying the Parsedown.php class (which is used by 'andreasindal/laravel-markdown') to replace all the '{' with the HTML ASCII characters. The replacement did work, but Vue still processed those.
If you do not want Vuejs to evaluate anything inside an HTML element you can use the v-pre directive as:
<code v-pre> {{ name }} </code>
In the above example vue will ignore everything inside the tags so, the name variable won't be evaluated and everything will be rendered as is.
* more on v-pre