Select multiple selected

Hello, first of all thanks for your time.

I have this array that I load it into a SELECT MULTIPLE

Select Multiple:
2

Code:

Array product that I load to the select:
1

Array check:
3

What I would like is that the SELECT MULTIPLE when idvisitaprod of the second array (array check) is equal to idproduto of the first array (Array produto) mark the options in selected.

Thank you, it is that I have been many days and I do not leave.

It’s not clear why you need the ids wrapped in objects in that second array. It’s much easier to just have an array of ids than it is to wrap them.

For just an array of ids it should be enough to set a suitable :value, as you have, and everything will just work. The wrapping gets in the way of the equality checking and also makes it much more difficult for Vue to know what to do when a new item is selected by the user.

If you really need the wrapping then you should be able to get it to work by adding in a computed property with a get and set. The computed property would represent the ids as a flat array, derived from the array of objects. That would allow the <select> to interact with a flat array of ids and you could map them to the wrapped versions inside the get and set functions. Exactly how you do that would depend to some extent on precisely why you’re wrapping them in the first place.

There are other ways to do it. For example, you could bind objects to the options:

<option :value="{ idvistaprod: filtro.idproduto }" ...>

This could get fiddly though as it relies quite heavily on object equality to work. The values in the second array would all have to come from the <select> and there are a lot of edge cases that could muck it up. If you already have values in that second array then they won’t be equal to the objects in the template.

Hi, thanks for your time. I am a newbie to Vue.

It’s not clear why you need the ids wrapped in objects in that second array. It’s much easier to just have an array of ids than it is to wrap them.

For just an array of ids it should be enough to set a suitable :value , as you have, and everything will just work. The wrapping gets in the way of the equality checking and also makes it much more difficult for Vue to know what to do when a new item is selected by the user.
[/quote]

Use laravel and vue and it returns the object that way, I don’t know how to make it be as you say an array of only identifiers.

No me funciono.

It sounds like you may need to use the computed property approach instead then.

You mean that the compute creates a function and compares the values? And what do I keep in a third array?

I meant something like this:

computed: {
  selectedIds: {
    get () {
      return this.arrayCheck.map(item => item.idvisitaprod)
    },
    set (ids) {
      this.arrayCheck = ids.map(idvisitaprod => ({ idvisitaprod }))
    }
  }
}

This creates a computed property called selectedIds that contains a flattened version of arrayCheck that Vue can understand. When the value changes it maps that back to a wrapped version in arrayCheck.

In the template you’d then have:

<select v-model="selectedIds" ...>

Thanks for everything Skirtle.

It worked very well! :v::v: