Pass attributes / props as array - laravel-8

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.

Related

How to use v-for in SweetAlert2

this.$swal
.fire({
title: '학교를 검색해주세요.',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: '검색하기',
cancelButtonText: '취소',
icon: 'question',
preConfirm: (school) => {
return axios.get(`(serverIp)/school?query=${school}`)
.then(response => {
console.log(response.data.data.schools)
this.$swal.fire({
title:'학교를선택해주세요.',
html: `<div v-for="(item, index) in response.data.data.schools" :key="index">
{{ item.school_name }}
</div>`
})
})
},
allowOutsideClick: () => !this.$swal.isLoading()
})
I've tried this code, but this is what it looks like in html.
{{ item.school_name }}
How can i do?
I've not use "Sweetalert 2, I hope you'll understand if i can't.
vue-sweetalert2 doesn't support rendering HTML templates dynamically, so you can't pass Vue templates this way; but you don't really need to in this case. Instead, you could generate the HTML string in JavaScript like this:
axios
.get(apiUrl)
.then(response => {
this.$swal.fire({
html: response.data.data.schools
.map(item => `<div>${item.school_name}</div>`)
.join('')
})
})
The above code uses Array.prototype.map on the array in response.data.data.schools to map the array values into an array of divs. Then it uses Array.prototype.join to combine the resulting array values into one long HTML string.
demo

Custom wordpress taxonomy with v2 api and vue

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>

Auto fill radio button in volt template without using model

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']) }}

Add index from foreach to variable name in fluid

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

Zend Form - Add a <div> around the input element

I'm using Zend Framework 2 Form to render my forms, and Bootstrap 3 to style them.
I want to use the Horizontal Form Layout as explained here:
Bootstrap 3 Forms tutorial
To do so, I need to add a div with appropriate classes around the input element; is there any easy way to add such div while adding the new element to the Form class? My element so far:
$this->add(array(
'name' => 'name',
'attributes' => array(
'type' => 'text',
'id' => 'contactName',
'maxlength' => '70',
'placeholder' => 'Your full name.',
'class' => 'form-control'
),
'options' => array(
'label' => 'Name: ',
'label_attributes' => array(
'class' => 'control-label col-xs-12 col-sm-2'
)
),
));
Can I add anything here to easily add <div class="col-xs-12 col-sm-10"></div> around the input element when I render it with <?php echo $this->formRow($this->form->get('name')); ?>?
I finally managed to solve the problem by creating a custom View Helper:
public function __invoke($element) {
echo '<div class="form-group">';
echo $this->view->formLabel($element);
echo '<div class="col-xs-12 col-sm-10">' . $this->view->formElement($element) . '</div>';
echo $this->view->formElementErrors($element);
echo '</div>';
}
Though I still wonder if there was another easier way to do that!