I got an array :
$array = ('picture-1' => '', 'picture-2' => '', 'picture-3' => '');
And now i need to use it in fluid like that:
<f:for each="{images}" as="image" key="key">
{image.picture-{key}}
</f:for>
This is wrong, i'm getting 3 times text {image.picture-{key}}.
How it should be done ?
I know how to do in in php but in fluid i'm newibe.
You don't need the key, the image variable contains the right data straight away (I've added values to the array):
PHP:
$images = array('picture-1' => 'file1.jpg', 'picture-2' => 'file2.jpg', 'picture-3' => 'file3.jpg');
Fluid:
<f:for each="{images}" as="image">
{image} <br />
</f:for>
Will result in :
file1.jpg <br /> file2 </br /> file3.jpg
Related
I have a problem with input search field in vue.js.
In my data I have nested arrays, which have titles. When I search the titles and hit space, nothing appears. And titles should be searched with spaces. For example I have a title "Pencils in store" and when I write "Pencils" in input, it does appear with all other information. When I write "Pencils in" nothing appears. Also, in some of the titles I can't reach to the blank space, results appears only while I write "Pen". Here is my code, I have tried with trim and split, but it did not work.
Very thanks in advance!
computed: {
getfiltered() {
const search = this.search;
return (
this.categories.filter(category =>
category.title.includes(search.toLowerCase()) ||
category.infos.some(info => info.name.includes(search)
)
)
)
},
Here is the input field
<input type="text" v-model="search" placeholder="Search" />
<div v-for="(category, categoryIndex) in getfiltered" :key="categoryIndex">
<h2>{{category.title}}</h2>
</div>
And the data
export default {
data: () => ({
search: '',
categories: [
{
title: 'Pencils in store',
infos: [{name:'Bic'},
{name:'Crayola'}]
}, //...and so on
The problem is solved in a way that #Estus Flask commented.
сategory.title.toLowerCase().includes(search.toLowerCase())
I want to use an array and use it to fill the props of a laravel-blade (8.x) component dynamically. In short something like that:
<x-button size="sm" {{ $buttonProps }} /> where $buttonProps is an array with key-value pairs defining the props and its values for the button to render.
The array would look like this: ['label' => 'My Button', 'size' => 'sm', ...]
Here is a more in detail example of what I try to do:
1. Button component with some props
#props([
'size' => 'md', # sm, md, lg
'variant' => 'basic', # basic, success, error
'label' => '',
])
#php
// ...
#endphp
<button {{ $attributes->merge([ 'class' => '...' ]) }}>
{!! $label !!}
</button>
2. ButtonGroup - which will render the Buttons using an array for their props
Here is the thing which doesn't work: {{ $buttonProps }}. I want to dynamically pass down the props for the Button as an array. But this solution doesn't work like that of course. Is there a solution how I can do that?
#props([
'buttons' => []
])
<div class="...">
#foreach ($buttons as $buttonProps)
<x-button size="sm" {{ $buttonProps }} />
#endforeach
</div>
3. Finally how I would use the ButtonGroup in this scenario
You may notice that I pass some extra prop to the first button. That's basically why I need a dynamic approach as I don't know all the props passed in my real-life scenario.
<x-button-group
:buttons="[
[
'label' => 'Export',
'hello' => 'world',
'type' => 'button',
'onclick' => '() => alert(\'hello world\')',
],
[
'label' => 'Main action',
'variant' => 'accent',
]
]"
/>
Note: I know I could easily make this example running using slots here, but my real-life example is a little different in requirements. I used Button and ButtonGroup as an example to illustrate my problem.
You don't seem to have shown where is the array of $buttons coming from.. You do foreach on $buttons.Investigate that part.
I am trying to concatenate 'assets' and to bind prod.productFileName to v-img :src
this works: <v-img :src="#/assets/abc.png" />
but I cannot do this: <v-img :src="#/assets/prod.productFileName" />
So I was trying to concatenate from the forEach bellow:
How can I do it?
<div v-for="prod in products" :key="prod.id">
<v-img :src="prod.productFileName" />
<script>
methods: {
getProducts() {
axios.get("https://localhost:44397/api/Product/List")
.then(res => {
this.products = res.data;
this.products.forEach(prod => {
prod.productFileName = `#/assets/${prod.productFileName}` // <--- I am getting an error
});
})
}
}
what you can do is store the response in this.products and no extra step is needed then in the img tag you can do is use template literals directly on the :src binding something like this
<div v-for="prod in products" :key="prod.id">
<v-img :src="`/assets/${prod.productFileName}`" />
<script>
methods: {
getProducts() {
axios.get("https://localhost:44397/api/Product/List")
.then(res => {
this.products = res.data;
})
}
}
and make sure that image is located in that location, otherwise the image will not be displayed
You have change your code like below.
this.products.forEach(prod => {
prod.productFileName = '/Uploads/' + prod.productFileName
});
Since this is a script you can simply append the string.
I'm using the wordpress v2 api to display custom posttypes. Everything works as expected, only the custom taxonomy returns their ID instead of the name.
I've read that adding ?embed to the endpoint and show_in_rest adds posttypes and taxonomies to the api result and this sort of looks to be the case. But the taxonomy name isn't found in the result.
Am I missing something?
Here are some snippets of my code...
// taxonomy snippet
register_taxonomy('types',array('work'), array(
'hierarchical' => true,
'labels' => $labels,
'show_ui' => true,
'show_admin_column' => true,
'query_var' => true,
'rewrite' => array( 'slug' => 'type' ),
'show_in_rest' => true,
'rest_base' => 'work-api',
'rest_controller_class' => 'WP_REST_Terms_Controller'
// custom posttype snippet
$args = array(
'labels' => $labels,
'description' => 'All projects',
'public' => true,
'menu_icon' => 'dashicons-layout',
'supports' => array('title', 'editor', 'thumbnail'),
'has_archive' => true,
'show_in_rest' => true,
'rest_base' => 'work-api',
'rest_controller_class' => 'WP_REST_Posts_Controller'
);
// DOM snippet
<div id="workfeed" class="work" style="margin-top: 100px;">
<div v-for="(item,index) in work" class="row" :data-index="index">
<div class="col">
<img :src="item._embedded['wp:featuredmedia'][0].source_url" />
</div>
<div class="col">
<h3>{{ item.title.rendered }}</h3>
{{ item.content.rendered }}
{{ item._embedded['wp:term'][0].taxonomy }}
</div>
</div>
</div>
I rendered elements of a form in volt file using below code. I want to auto fill the default radio button.
<div class="form-group" >
<div><label>Gender *:</label>
<label class="radio-inline popup-gender">{{ element }}{{ element.label()}}:</label>
</div>
If you're using PHP to prepare the form:
$radio = new Radio('my_radio', ['id' => null, 'value' => 'one']);
$radio->setDefault('one');
$form->add($radio);
$radio = new Radio('my_radio', ['id' => null, 'value' => 'two']);
$form->add($radio);
If you're using Volt:
{{ set_default('my_radio', 'one') }}
{{ radio_field('my_radio', ['id' => null, 'value' => 'one']) }}
{{ radio_field('my_radio', ['id' => null, 'value' => 'two']) }}