Change css class of element by using its ref (ion-row) on android

I have this app which uses a ref to locate the element which was just clicked to change its
appearance by setting a different class

 this.$refs[type + methodHandlers.getSelectedRow(type)].**$el**.classList.remove(selectedClass);
 this.$refs[type + methodHandlers.getSelectedRow(type)].**$el**.classList.add(selectedClass);

in the latest code I get an error ,
TypeError: Cannot read properties of undefined (reading ‘classList’)

which means $el is not any good. but maybe the ref doesn’t contain the element reference the same way

I have used this code since Ionic V1 with Angular

I have multiple slides, each containing a dynamically constructed view with components
slide (vfor for the number of data items in the definition table)

the content component is passed the data structure design for the layout (fields, names, widths, datatypes) so it is data agnostic

so each page should behave the same… a selected row should be highlighted(and toggle selected or not) for edit, and any other row that was selected should be unselected
this also happens for long press or double click. which invoke the editor(modal) for that row.

I didn’t see mention of refs changing in latest , 6.20.3

I dumped out the refs and then tried to get the content of this ref

// list of refs. good (two rows)
Msg: keys= Viewer0,Viewer1
// good selected to select the second row
Msg: handle=Viewer1
// inside ref (stringify)
Msg: keys= [object Proxy]

says object Proxy

looks like I have to use the toRaw() function.

ok, that (toRaw) didn’t work

  • and proxy.value doesn’t work (returns undefined on the proxy)
  • and toRaw(proxy).value doesn’t work
  • and toRaw(proxy.value) doesn’t work
  • and toRaw(proxy).$el doesn’t work
  • and value.$el doesn’t work
    (from here )
    How to use $refs and the Vue 3 Composition API?

value might work for a string property, but not for a DOM element

rework don’t need refs