Vue.js v-model not picked up

Question

I have a Vue/Vuetify page that uses a dialog to collect data to submit. It's a big page so I don't want to post the entire file if possible. The problem I am seeing is that the v-model value isn't picked up.

<template>
  <div class="px-10 ma-10 grey lighten-5">
  <v-dialog v-model="scannedDialog" width="600">
      <v-card auto-grow>
        <v-card-title class="headline blue" primary-title>
          Update Scanned Device
        </v-card-title>
        <v-card-text class="pa-5">
          <v-form ref="sendForm" v-model="scannedvalid">
            <v-text-field
              v-model="selectedScannedDevice.scannedDeviceId"
              label="Scanned Internal Id *"
              :rules="[rules.required]"
            >
            </v-text-field>
            <v-text-field
              v-model="selectedScannedDevice.firstName"
              label="First Name *" 
              :rules="[rules.required]">
              </v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions class="pa-5">
          <v-btn
            class="ml-auto"
            @click="cancelScannedDevice"
            outlined
            color="primary">
            Cancel
         </v-btn>
         <v-btn
            class="ml-auto"
            @click="saveScannedDevice"
            outlined
            :disabled="!scannedvalid"
            color="primary">
            Save
          </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </div>
    </template>

<script>
export default {
  data() {
    return {
      selectedScannedDevice: [],
       ....
      };
     },

 methods: {
    async saveScannedDevice() {
        console.log( "saveScannedDevice starting with form: " + JSON.stringify(this.selectedScannedDevice)
          );
...}

</script>

When I run this, the saveScannedDevice always has the result: saveScannedDevice starting with form: []

I cannot find any parsing/formatting errors, but this.selectedScannedDevice never seems to have values in it.

variable assigned to v-model is present inside the data section? I want to ask that let's say ```v-model="selectedScannedDevice.firstName"``` you are assigned this variable in v-model but selectedScannedDevice is an array having blank value .can you explain more so I can understand? — Nilesh Mishra, Mar 11 '22 at 17:35
yes, I do this in another dialog that I have. As I understands it, this means the .firstname is added dynamically to the selectedScannedDevice array. I also tried defining selectedScannedDevice as a json object with firstName but it didn't see that either — sonoerin, Mar 11 '22 at 18:28
then you have to provide some live code otherwise it will be difficult to understand. — Nilesh Mishra, Mar 11 '22 at 18:41
I tried uploading to codeine, but the project is too large - I have multiple JS files for the services. Can you verify that the snippet I posted above is syntactically correct? It is almost identical to another class that is working and have been looking at it so long I am afraid I am looking thru the problem at this point. — sonoerin, Mar 11 '22 at 22:09

score 1 · Accepted Answer · answered Mar 12 '22 at 01:18

The problem is selectedScannedDevice is an Array, and the v-models are bound to properties of that Array:

export default {
  data() {
    return {
      selectedScannedDevice: [], ❌ should not be array
    }
  }
}

<v-text-field v-model="selectedScannedDevice.scannedDeviceId">
<v-text-field v-model="selectedScannedDevice.firstName">

While it's technically possible for v-model to attach those properties to the Array, creating this:

['scannedDeviceId': 'x', 'selectedScannedDevice': 'y']

...that is a misuse of Arrays.

The JSON format only allows numeric indexes, so an Array with only non-numeric indexes (as in your case) is effectively an empty array, and calling JSON.stringify() on such an array results in the string representation of that ("[]").

Solution

Initialize selectedScannedDevice to an Object instead of an Array.

export default {
  data() {
    return {
      selectedScannedDevice: {}, ✅
    }
  }
}

demo

Thank you, I changed all references from array to object and that fixed it! — sonoerin, Mar 12 '22 at 19:19

Vue.js v-model not picked up

1 Answers1

Solution