我有一個 Vue/Vuetify 頁面，它使用對話框來收集要提交的資料。這是一個很大的頁面，所以如果可能的話，我不想發布整個檔案。我看到的問題是未獲取 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 以 form: [] 開頭
我找不到任何決議/格式錯誤，但 this.selectedScannedDevice 似乎從來沒有值。
uj5u.com熱心網友回復：
問題是selectedScannedDevicea Array，并且v-models 系結到 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">
雖然在技術上可以v-model將這些屬性附加到Array, 創建這個：
['scannedDeviceId': 'x', 'selectedScannedDevice': 'y']
...這是對s的濫用Array。
JSON格式只允許數字索引，因此Array只有非數字索引（如您的情況）實際上是一個空陣列，并且呼叫JSON.stringify()這樣的陣列會導致該（"[]"）的字串表示。
解決方案
初始化selectedScannedDevice為 aObject而不是Array.
export default {
data() {
return {
selectedScannedDevice: {}, ?
}
}
}
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442215.html
標籤：Vue.js Vuetify.js
上一篇：如何發出文本輸入的全部值？