Livewire access custom input element tag value?

Question

Fairly new to Livewire here.

I ran into something for which i can't seem to find the answer for, reading through the docs and using google until now.

Suppose that i have some input fields inside of a form which have custom attributes with a value assigned to it.

Example: <input type="text" wire:model="title" valueid="332">

So i do not need the value of the input, but rather the value that is stored inside the custom attribute.

For a long time i've used jQuery ajax calls and i could just get the 'valueid' attribute and send its value '332' within the ajax call and process it further inside my controller method(s). But i can't seem to find how to do that using LiveWire.

Can someone point me to how to get those attributes and their values inside of my Livewire component method(s)?

Many thanks for your help!

Edit:

There are 5 input fields in a row and there are multiple rows in my table. The first input on every row isn’t a standard input field, but a custom ‘select’ or drop-down field. Populated with 2 columns: the value that the user sees and the ID that that value has in the database.

Once the user selects a value from the drop-down, I need to receive the ID of the selected value inside of the component instead of the chosen value itself.

So the select field has multiple values and one of them has a value of ‘car’ and the corresponding DB record ID is 23. I want to receive 23 instead of ‘car’ in my component to further process it.

As there are lots of rows that have the same custom select field, I don’t really see an option to store the ID in a variable. So instead I used jquery earlier to store it as an attribute value directly on the select field itself.

Hope it is clearer now.

Answer 1

You can use a standard jQuery selector to get the value of the tag, then use something along with lines of $wire.property = value. This would require a public property on the Livewire component, but will then set it. You can also use @set(property, value) from within the component as well. You will need to be able to fire the livewire event from the select on change, then capture with JS. Alternatively, you can just set the value to the proper ID, and attach it to a property with wire:model, which I think is a better, less convoluted solution. You can build an array of proper values in the Livewire component, and use blade @foreach to build the options with the proper ID and and display values

public array $arr = [];
public string $select;
...
public function getValues() {
    $models = Table::get();
    foreach ($models as $v) {
        $this->arr[$v->id] = $v->column;
    }
...
<select wire:model>
    <option></option>
    @foreach ($arr as $k => $v)
        <option value="{{ $k }}">{{ $v  }}</option
    @endforeach
</select>