Problem using QSelect with QToggle

[ricardo.gomes1]

Using the QSelect component with QToggle has problems. When QSelect has a list of options arranged in an array of objects, for example:

[
  {
    label: 'Google',
    value: 1
  }, 
  {
    label: 'Facebook',
    value: 2
  }
]

… and it already loads selected options, for example:

[
  {
    label: 'Google',
    value: 1
  }
]

… the component can understand that that selected option corresponds to a particular picklist entry on which it is based. The problem that happens is that QToggle components belonging to QSelect are based on the list of selected options, for example:

[
  {
    label: 'Google',
    value: 1
  }
]

… and each QToggle has an object for the purpose of mapping whether the option has been selected, for example:

{
  label: 'Google',
  value: 1
}

… but when this happens, the QToggle component cannot verify that the object it has is selected. This is because the component checks through the javascript indexOf function, and it does not check whether the object is equal, but whether the ‘id’ of the two objects to be compared are equal, and how the objects in this regard are different. , it does not mark as selected.

What can I do to make the QToggle components to work in this case?

PS: I did a codepen with this problem. You can access here: https://codepen.io/ricardo_gomes1/pen/KKwZBGy

[metalsadman]

@ricardo-gomes1 you can do it several ways, ie. https://codepen.io/metalsadman/pen/xxbpQqJ?&editable=true&editors=101 or https://codepen.io/metalsadman/pen/gOboQgO.

[ricardo.gomes1]

The problem is that I receive the selected object by prop in the component, so these methods won’t work

[metalsadman]

@ricardo-gomes1 the example is per your codepen above. the logic is there, i don’t see why prop passing would be a problem when it’s pretty vue js basic.