I want to render particular component in v-for based on the category present in the array.
Have a look at Dynamic Components.
You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute:
Demo Code:
<span v-for="category in categories">
<component :is="category.name"></component>
</span>
You also need to register this components globally or in a component you are using.
Related
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'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.
I have problem with including Joomla views. I have many views in my extension and I want to include another one in my Dialog.
How can I do it?
In my first view I have this code:
<div id="modalDostawca" title="Dostawcy">
<div id="wewM">
//in here i want to include view data/tmpl/default.php
</div>
</div>
What kind of extension is your extension? A module? A component?
If it's a component, what you are trying to include is a template for a view, not a view! (the view is the one with view.html.php). Create a view + template for what you are trying to see. I don't think Joomla! can call multiple views at the same time. If you can reuse code inside models (if this is your concern).
You can also include files the normal way, with include(...).
My graphic design requires all fields in HTML forms to be lowercase. Example:
<tr><th><label for="id_pressure_Hg">pressure Hg</label></th><td><input
id="id_pressure_Hg" type="text" name="pressure_Hg" /></td></tr>
Django forms, however, per default make my labels with capital first letter. Since I have a lot of fields and many forms are created from a model (through a modelform), the "label" attribute is not a viable solution.
Is there a way to modify the function which translates field names into field labels?
you can try this.
example..
in your forms.py
value = forms.CharField(label=u'', widget=forms.TextInput())
in your HTML file.
<ul>
<li>value Value : {{form.value}}</li>
</ul>
you can modify the form.value in your CSS or JQuery. i has this attribute as an input in html.. id=id_value and name=value