2

I have a multi select v-autocomplete component from vuetify.js and the items are an array that get used in the multi select dropdown

The defendantCodeOptions items look like this

{text: "some text", value: 36}

I can't seem to figure out how to select items in javascript that are returned from a ajax call.

<v-autocomplete 
v-model = "defendantCode"
label = "Defendant Code"
:items = "defendantCodeOptions"
:loading = "defendantCodeIsLoading"
:filter = "customFilter"
clearable
multiple
dense >
</v-autocomplete>

ex. I want to loop through each item from a ajax calls response like this below and set each checked values in the dropdown to the ones that match the values from the server. But this below isn't working!

// returned values from ajax call
what I want is something like this
for (var i = 0; i < all items; i++) {
  // if the value of this item exists in any of the returned values, check it
 }

I want it to look like this using code behind and NOT the UI

enter image description here

chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 1
    v-model is linked to defendantCode so I would guess that setting `this.defendantCode = 3` would do it? – ezero Sep 12 '19 at 21:39
  • In your for loop you are just changing the value of defendantCode on each iteration of the loop. But I think what you want to do is change the value of each item in the drop down, correct? – j3py Sep 12 '19 at 21:55
  • Maybe you can provide an example or screenshot of the end-state? – j3py Sep 12 '19 at 21:56
  • I updated my post again to show more details – chuckd Sep 12 '19 at 21:57
  • One question - if I just wanted to run through each item from the drop down and mark it as "checked" how would I do that? – chuckd Sep 12 '19 at 21:59
  • So if it's a multi-select, then it looks like this.defendantCode should start out as an array and you need to push the values into it. – ezero Sep 12 '19 at 21:59
  • yes it is a multiselect. But it's the defendantCodeOptions that is the array, not defendantCode. And each item in the array is a text/value pair. – chuckd Sep 12 '19 at 22:02
  • defendantCode is linked via v-model so the values in defendantCode should set selected options in defendantCodeOptions. That's how it works with a simple Vue select anyway. It looks similair in this example from Vuetify: https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/autocompletes/intermediate/slots.vue – ezero Sep 12 '19 at 22:06
  • To elaborate on ezero, and correct me if I'm wrong: if you have this: `this.defendantCodeOptions = [{text: "some text", value: 36}, {text: "some other text", value: 63}]` . Then in the for loop do `this.defendantCodeOptions.push(valueFromLoop[i]);` assuming your value is in the format `{text: , value: }`. – j3py Sep 12 '19 at 22:09
  • I just updated my post – chuckd Sep 12 '19 at 23:29

1 Answers1

1

Here is the correct answer.

this.defendantCode = [3, 4]
chuckd
  • 13,460
  • 29
  • 152
  • 331