HTML5 data attributes in ionic components - VUEJS

Hello everyone!

I have been trying to add some custom data-* attributes to the ionic-select-option component but i cant access it in the @ionChange event.

For example:

<ion-item style="display: none">
    <ion-label>Shipout</ion-label>
    <ion-select ref="selectShipout" @ionChange="shipoutChanged" mode="ios">
        <ion-select-option
            :ref="'option' + shipout.shipout_id"
            v-for="shipout in shipoutIds"
            :key="shipout.shipout_id"
            :value="shipout.shipout_id"
            :data-key="shipout.shipout_id"
            >{{ shipout.shipout_id }} - {{ shipout.initiated_by }}</ion-select-option
        >
    </ion-select>
</ion-item>

So inside the shipoutChanged function i can access the selected value as follow:

shipoutChanged(event) {
    console.log(event.target.value);
}

In a normal VUEJS app I have no issues accessing the data-key attribute, because it’s accessible like so:

event.target.dataset.key

or just for the sake of example

event.target.dataset.mycustomhtmlattribute

or whatever the name may be. Well, I can’t seem to do this in a IONIC app.

Accessing the data attribute with this code:

event.target.dataset.key

returns undefined. When I inspect the HTML that’s being returned by just printing out the event.target, I can see that the ion-select element is being targeted, not the ion-select-option!

If you carefully checked my code above, you could see that I have added a :ref attribute to every option, which looks like “option2452” after rendered.

I can access the HTML element then and get the custom attribute I’m looking for like this:

console.log(this.$refs['option' + event.target.value].$el.getAttribute('data-key'));

While the job is done, it just doesn’t feel right. I get a feeling this is a “hack” and not a proper coding pattern in this framework. Am I wrong?

Please help me and/or point me to the documentation to learn more. Thank you very very much!

Regards, Mike

1 post - 1 participant

Read full topic