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.
Related
I am new to Vue js, Inertia and Laravel.
But I have gotten stuck and cannot figure out what the problem is even though I try searching google and looking at videos.
I have this code
<div v-for="(seed, index) in seeds" :key="index">
Id {{ seed.id }}
<inertia-link :href="'/fert/' + '{{ seed.id }}'">
Go to seed
</inertia-link>
</div>
And The first {{ seed.id }} outside of the links looks great, it shows the actual id.
However then {{ seed.id }} within the link formats, so the link shows this:
Id 1Go to seed
Why is it formatting inside the link but not outside? and how to I fix it?
Thanks in advance, and yes I am very noob. sorry
You shouldn't use curly braces in attribute's value.
Using :[attribute-name] already tells Vue that you gonna use some JS expressions in value
:href="'/fert/' + seed.id"
You shouldn't use curly braces within the link. A nicer way to concatenate vars with text is to use template literal ES6 with backticks
<inertia-link :href="`/fert/${seed.id}`">Go to seed</inertia-link>
I have an x-for loop:
<template x-for="item in items" :key="item.id">
Inside the template I call my blade component:
<x-card />
How can I pass vars from the Alpine JS loop to the blade component?
I've seen this and have tried to implement it:
<template x-for="item in items" :key="item.id">
<x-card ::title="item.title" />
....
But I cannot output the title var inside the blade component.
AlpineJS is JavaScript, therefore client side. Blade is server-side. The tip you passed is what is described in the docs and is just to prevent Blade from evaluating the statement, since Blade can also process single-colon variables.
If your goal is to display the title as text within the card, then have a look at x-text. You should be able to call x-text="item.title". :title should be setting the title attribute on the item.
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.
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