need alpine.js :value to be used just in calculation not to override default html value

Question

so im working with laravel 8 and using alpine.js to create value for readonly field that will on submit be processed with the form in store method.I did this successfully until now, cuz i'm now using select for input. Relevant code looks like this:

<div class="card-body"
             x-data="{
              bom: parseInt( ''),
              quantity: parseInt( ''),
              total: parseInt( '')
            }">
                    <select class="form-control select2 {{ $errors->has('bom') ? 'is-invalid' : '' }}" name="bom_id" id="bom_id" x-model.number="bom" required>
                            @foreach($bom_value as $key => $value)

                            <option value="{{ $value->id }} {{ old('bom_id') == $value->id ? 'selected' : '' }}" :value="{{ $value->total }}">{{ $value->name }}</option>
                            @endforeach
                    </select>

Problem is, that when i set :value it shows same value in value="{{ $value->id }}", but i need to pass id there, and only use $value->total for calculation of that read only input based on selected choice. I have checked and $value->id shows right data, so as all variables. Guess there is something wrong with alpine or my understanding of it.

Answer 1

I don't clearly understand what you mean with:

and only use $value->total for calculation of that read only input based on selected choice

But you definitely shouldn't use any attribute (here value) multiple times. Since you are binding a value to it with :value=.. you are selling AlpineJs to put attach the value you pass between the quotes to the value attribute.

So you could create a custom data-attribute, let's say data-value and pass your value to it. You can then extract this value and attach it to your readonly input field.

Does this help you?