Alpine x-data initialization with empty variable

@Sinnbeck Well ... why not but it doesn't solve my issue.

Here is another part of my code.

@php
    $qt = old('quantity_type', $product->quantity_type);
    $uw = old('unit_weight', $product->unit_weight);
@endphp

<div x-data="{ qt: {{ $qt ?? 0 }}, uw: {{ $uw ?? 0 }} }">

	<div class="uk-margin">
		<label for="quantity_type">Type de quantité</label>
		<select class="uk-select" id="quantity_type" name="quantity_type" x-model="qt" x-on:change="if (qt == 1) { uw = null }">
			@foreach (config('mapp.quantity_types') as $quantity_key => $quantity_type)
				...
			@endforeach
		</select>
	</div>

	<div class="uk-margin" x-show="qt == 2">
		<input class="uk-input" type="number" step="1" min="0" id="unit_weight" name="unit_weight" x-model="uw" />
	</div>

</div>

If the variables are initialized with 0 or '' (empty string), I can't display the additionnal field.

@vincent15000 What is the "additional field"?

I can't display the additionnal field.

Are you getting an error currently?

And I expect you want uw to be a numeric value, yet you set it to nullon change of the select of qt is ever 1?

@Sinnbeck This one which I show according to the value of qt.

	<div class="uk-margin" x-show="qt == 2">
		<input class="uk-input" type="number" step="1" min="0" id="unit_weight" name="unit_weight" x-model="uw" />
	</div>

@Sinnbeck uw has to be null if qt == 1.

@vincent15000 Sorry I am a bit confused. You want to show that input if qt == 2, and it does not show if qt is 0?

@Sinnbeck When the page loads with uw not initialized with a value, when I select the quantity_type with value == 2, the second field doesn't display and I have an JS error message in the console.

@vincent15000 Ah ok now I get it :)

What is the exact error now? Can you copy paste it?

@Sinnbeck

Uncaught SyntaxError: Unexpected token '}'
...
Uncaught ReferenceError: qt is not defined
...
Uncaught ReferenceError: uw is not defined

With ...

<div x-data="{ qt: {{ $qt }}, uw: {{ $uw }} }">

And with this, no error.

<div x-data="{ qt: {{ $qt ?? 0 }}, uw: {{ $uw ?? 0 }} }">

@vincent15000 Ah so the error is actually Uncaught SyntaxError: Unexpected token '}'. Can you see where that error comes from. Can you check the browser dev tools under Elements, and see how this div looks when it fails

<div x-data="{ qt: {{ $qt ?? 0 }}, uw: {{ $uw ?? 0 }} }">

@Sinnbeck It fails only with these two versions.

<div x-data="{ qt: {{ $qt }}, uw: {{ $uw }} }">

Or

<div x-data="{ qt: {{ $qt ?? '' }}, uw: {{ $uw ?? '' }} }">

And not with this version.

<div x-data="{ qt: {{ $qt ?? 0 }}, uw: {{ $uw ?? 0 }} }">

But when I need uw to be null, Alpine seems not to accept initializing a variable with null. Even if I set the variable with an empty string, it fails.

@Sinnbeck The failure points on the last } which closes the x-data.

Alpine Expression Error: Unexpected token '}'

Expression: "{ qt: 1, uw:  }"

@vincent15000 Yeah. It renders nothing. Remember that it just parses the output of the string version, and null or an empty string will render nothing.

Try this instead

<div x-data="{ qt: {{ $qt ?? 'null' }}, uw: {{ $uw ?? 'null' }} }">

@Sinnbeck Oh ... it works ... but why ? I thought writing this would have set ``"ǹull"``` string to the variable, but it works fine now.

@vincent15000 Well blade returns a string here {{ null }}. But when you turn null into a string you get nothing.. same with ''

If the issue was solved, then please remember to mark the thread as solved :)

@Sinnbeck Yes no problem ;) ... I just read your two last messages, I had a meeting ;).