Laravel Blade: компонент x-base не отображает правильный HTML-тегPhp

Кемеровские программисты php общаются здесь
Ответить
Anonymous
 Laravel Blade: компонент x-base не отображает правильный HTML-тег

Сообщение Anonymous »

Я пытаюсь создать динамический компонент Laravel Blade, который может отображать различные HTML-теги, используя свойство tag. Я использую базовый компонент и компонент кнопки. Однако когда я визуализирую компонент кнопки, он выводит неверный тег в HTML вместо желаемого тега.
Вот моя настройка:
button component:
@props([
'type' => 'button', // The type of button (e.g., button, submit, reset)
'name' => '', // The name attribute for the button (useful in forms)
'value' => '', // The value attribute for the button (useful in forms)
'disabled' => false, // Boolean to disable the button (adds the disabled attribute)
'onclick' => '', // JavaScript code to execute on click
])

merge(['class' => 'btn vn-button']) }}
type="{{ $type }}"
@if($name) name="{{ $name }}" @endif
@if($value) value="{{ $value }}" @endif
@if($disabled) disabled @endif
@if($onclick) onclick="{{ $onclick }}" @endif
>
{{ $slot ?? 'Button' }}


base-component:
@props([
'tag' => 'div', // The HTML tag to use, default is .
'id' => '', // The ID attribute, for CSS or JavaScript targeting.
'class' => '', // Additional CSS classes.
'style' => '', // Inline styles.
'title' => '', // Tooltip or additional information.
'dataSelectors' => [], // Array of custom data-* attributes.
'ariaLabel' => '', // ARIA label for accessibility.
'role' => '', // Semantic ARIA role.
'hidden' => false, // Boolean to add the hidden attribute.
])

$value)
data-{{ $key }}="{{ $value }}"
@endforeach
>
{{ $slot }}



Использование в файле Blade:
Test
Ожидаемый результат:

Test


Текущий результат:

....


Как я могу заставить базовый компонент правильно отображать значение динамического тега как желаемый тег HTML (например, вместо )? Существует ли известное ограничение или лучший подход для обработки динамических тегов в компонентах Laravel Blade?
Обновление:
Я ПОПЫТАЛ ИСПОЛЬЗОВАТЬ X-DYNMIC -COMPONENT, но результат тот же... Я думаю, что это как-то связано с тем, что это вложенный компонент по сути

@props([
'tag' => 'div', // The HTML tag to use, default is .
'id' => '', // The ID attribute, for CSS or JavaScript targeting.
'class' => '', // Additional CSS classes.
'style' => '', // Inline styles.
'title' => '', // Tooltip or additional information.
'dataSelectors' => [], // Array of custom data-* attributes.
'ariaLabel' => '', // ARIA label for accessibility.
'role' => '', // Semantic ARIA role.
'hidden' => false, // Boolean to add the hidden attribute.
])

$value)
data-{{ $key }}="{{ $value }}"
@endforeach
>
{{ $slot }}



Подробнее здесь: https://stackoverflow.com/questions/793 ... t-html-tag
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Php»