Vue.js v-model 未拾取

Question

我有一个 Vue/Vuetify 页面，该页面使用对话框收集要提交的数据。这是一个很大的页面，所以我不想 post 如果可能的话整个文件。我看到的问题是未提取 v-model 值。

<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>

当我运行这样做时，saveScannedDevice 总是有结果：以表格开头的 saveScannedDevice：[]

我找不到任何 parsing/formatting 错误，但 this.selectedScannedDevice 似乎从来没有值。

Answer 1

问题是 selectedScannedDevice 是一个 Array，v-model 绑定到 Array 的属性：

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

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

虽然 v-model 在技术上可以将这些属性附加到 Array，但创建此：

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

...即a misuse of Arrays.

JSON 格式只允许数字索引，因此只有 non-numeric 索引的 Array（如您的情况）实际上是一个空数组，调用 JSON.stringify() 在这样的数组上产生该 ("[]").

的字符串表示形式

解决方案

将 selectedScannedDevice 初始化为 Object 而不是 Array。

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

demo

Vue.js v-model 未拾取

Vue.js v-model not picked up

vue.js

vuetify.js

解决方案