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.
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.
I have Laravel app that I wrapped in a Vue entry point, <div id="app-shop"></div>. I have Vue components I can use in the layout blade with no problem. In the layout blade, I have #yield('content') to display other content. One such section is the shopping cart, such as /cart route which yields my cart.blade file. When I try to use the same component in the cart.blade though, it doesn't show.
Cart.blade.php
#section('content')
<div>
<checkout-component></checkout-component>
</div>
#endsection
Attempting to use it like this does not work. I see no errors in the console but the component doesn't render.
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.
I'm trying to figure out how to conditionally load sub/child component from Laravel's blade template
I have a main container, which is being called from the blade:
<structure-container view='menu-index'></structure-container>
Here is the StructureContainer.vue
<template>
<div>
//I can have if-else statement here by "view", but looking for a better solution
<menu-index></menu-index>
</div>
export default{
components: {
'menu-index': require('./menu/IndexComponent.vue'),
'test': require('./menu/TestComponent.vue'),
},
props: ['view']
}
As you can see I have two child components: menu-index & test. I want to pass the parameter from blade and display the corresponding component. Can I avoid if-else statements? there should be a better way to do this
You can simply bind the component name dynamically to the is property (using v-bind:is or :is), i.e.:
<div>
<component :is="view"></component >
</div>
The really awesome thing about this is that the <component> container is reactive, and you can dynamically load/unload/change the components on-the-fly. How awesome is that? :)
For more information, I encourage you to read up the documentation on dynamic components on the official docs.
<template is="dom-bind">
<iron-ajax
auto
url="http://localhost:9000/api/version"
last-response="{{versionNumber}}"
verbose
></iron-ajax>
<template is="dom-repeat" items="{{versionNumber}}">
<small class="u-ml+">{{item.first}}</small>
</template>
<template>
<small>[[versionNumber]]</small>
</template>
</template>
I'm a little bit lost with Polymer - I have an iron-ajax element which is set up to talk an API endpoint, which is returning the current version of my application.
I want to be able to bind this version number directly on the page. Is there something I'm doing incorrectly in the above code?
I tried using a dom-repeat template and attempting to grab the first item, but I don't seem to be getting anything. Same with attempting to one-way bind inside of a <small> tag.
My understanding is that if I'm within a dom-bind template, I don't have to define a custom element.
Yes, data-binding works inside of a dom-bind template without the need for a custom element.
One problem in your code is the template tag around <small>
<template>
<small>[[versionNumber]]</small>
</template>
The content of a template by itself won't be shown/rendered in the DOM. See http://www.html5rocks.com/en/tutorials/webcomponents/template/ for some detailed information about templates).
Using <small>[[versionNumber]]</small> inside of your dom-bind template with the extra template tag should work.
Another issue is, that iron-ajax by default handles responses as JSON, so will probably run into a parse error when it receives a string and last-response will get no value.
You would have to specify the handleAs property of iron-ajax accordingly.
<iron-ajax handle-as="text" ...>
And dom-repeat will only work for arrays.