How to have add items in vuetify combobox and maintain v-model JSON structure-CodePudding

I have a vuetify combobox that I set the v-model equal to some JSON array that has a property "EMAIL_ADDRESS" with an associated email address. If I use items that are already in this v-model the data format matches the original JSON array I set its value too:

[
  {
    "EMAIL_ADDRESS": "[email protected]"
  },
  {
    "EMAIL_ADDRESS": "[email protected]"
  }
]

If I add a item to the combobox which can happen since its a send email form. The array does not maintain the v-model structure of the original items array as shown here:

[
  {
    "EMAIL_ADDRESS": "[email protected]"
  },
  "[email protected]",
  "[email protected]"
]

Is there any way to maintain the structure of the items array so it actually pushes the new value to that array?

<v-combobox label="To"                                                                          
            v-model="emailToModel"
            required
            multiple
            :items="emailTo"
            item-text="EMAIL_ADDRESS"
            
            filled
            dense
            return-object
            hide-details="auto">
</v-combobox>

CodePudding user response：

You can simply achieve it by iterating emailToModel array and based on the type check you can convert the string into an object and then pushed into a emailTo array.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      emailToModel: [
        {
          "EMAIL_ADDRESS": "[email protected]"
        },
        {
          "EMAIL_ADDRESS": "[email protected]"
        }
      ],
      emailTo: []
    }
  },
  mounted() {
    this.emailTo = this.emailToModel
  },
  methods: {
    getUpdatedValue() {
      this.emailToModel.forEach(item => {
        if (typeof item !== 'object') {
          this.emailTo.push({
            "EMAIL_ADDRESS": item
          })
        }
      })
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
          <v-combobox
            label="To"
            v-model="emailToModel"
            item-text="EMAIL_ADDRESS"
            :items="emailTo"
            multiple
            filled
            dense
            hide-details="auto"
            @change="getUpdatedValue"
          ></v-combobox>
    </v-container>
  </v-app>
</div>

CodePudding user response：

I think you can simply specify "return-object" prop to the component without specifying "item-value" prop . So that combox will return the whole object which you selected to the "select" array

      <v-combobox
          v-model="select"
          :items="items"
          label="select items"
          multiple
          return-object
          item-text="EMAIL_ADDRESS"
        ></v-combobox>