Level 122
you view becomes invalid if you raw echo symbols
Show your view. Not interested in the component,
May 24, 2024
8
Level 2
Using symbols in Livewire component giving error
I'm creating a simple password generator for my website. If i put special characters in a variable ($symbols), I'm getting this error -
Livewire only supports one HTML element per component. Multiple root elements detected for component: [pages.generate-password]
Here is the complete code of the single file component
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Volt\Component;
new
#[Layout('layouts.guest')]
#[Title('Generate Password')]
class extends Component {
public $password = null;
public $uppercase = true;
public $lowercase = true;
public $numbers = true;
public $symbols = true;
public $length = 6;
private $uppercase_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
private $lowercase_chars = 'abcdefghijklmnopqrstuvwxyz';
private $number_chars = '0123456789';
private $symbol_chars = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
public function updated($property) {
$chars_set = '';
if ($this->uppercase) $chars_set .= $this->uppercase_chars;
if ($this->lowercase) $chars_set .= $this->lowercase_chars;
if ($this->numbers) $chars_set .= $this->number_chars;
if ($this->symbols) $chars_set .= $this->symbol_chars;
$password = '';
for ($i = 0; $i < $this->length; $i++) {
$password .= $chars_set[rand(0, strlen($chars_set) - 1)];
}
$this->password = $password;
}
}; ?>
<div class="container py-5">
<div class="pb-5 mb-5 border-bottom">
<h1>Password Generator</h1>
<p class="mb-0">
This discount calculator can help you to find the discounted sale price.
</p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Password</label>
<input type="text" class="form-control" wire:model.live='password' />
@error('password')
<p class="text-danger mb-0 mt-1 small">{{ $message }}</p>
@enderror
</div>
<div>
<labe class="form-label">Password Strength</labe>
<input class="form-control" min="0" type="number" wire:model.live='length' >
@error('length')
<p class="text-danger mb-0 mt-1 small">{{ $message }}</p>
@enderror
</div>
</div>
<div class="col-lg-6">
<label class="form-check form-switch">
<input class="form-check-input" role="switch" type="checkbox" wire:model.change="uppercase" />
<span class="form-check-label">Include uppercase</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" role="switch" type="checkbox" wire:model.change="lowercase" />
<span class="form-check-label">Include lowercase</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" role="switch" type="checkbox" wire:model.change="numbers" />
<span class="form-check-label">Include numbers</span>
</label>
<label class="form-check form-switch">
<input class="form-check-input" role="switch" type="checkbox" wire:model.change="symbols" />
<span class="form-check-label">Include symbols</span>
</label>
</div>
</div>
</div>
How can i fix this issue?
Thank you
Level 2
@Snapey updated the question. added complete code. note that its single file page component. Thank you
Level 122
@zahedkamal87 I assume you do actually have an opening php tag?
whats with the line new ?
You dont need a semicolon here }; ?>
Level 2
@Snapey Yes, I've php tag at top.
That }; was auto generated by the artisan command. eg -
php artisan make:volt password-generator --class
Level 122
might be this line
private $symbol_chars = '!@#$%^&*()_+~`|}{[]:;?><,./-=';
the combination of ?> next to each other is being seen as php close statement and everything after becomes html. Probably a simple fix of reordering the symbols.
Level 2
@Snapey yeah.. changing the order fixes the problem. but is there no Livewire way to fix this? Actually, I faced this same problem on another component where i had to remove a sub string. Here is the line -
$xml = str_replace( '<?xml version="1.0"?>', '', $xml_string );
So, basically i'll get the error if i use ?> or <?. No solution/fix?
Level 122
@zahedkamal87 its a php parsing issue which happens way before livewire gets started, so no, its nothing to do with livewire.
Might not be an issue if you use double quoted string
Level 2
@Snapey double quote not fixing the problem
Please or to participate in this conversation.