使用 Nuxt 和 Firestore 的 vuetify v-text-field 内不显示数据答案

【问题标题】：Data not display inside vuetify v-text-field with Nuxt & Firestore使用 Nuxt 和 Firestore 的 vuetify v-text-field 内不显示数据
【发布时间】：2021-12-17 13:50:55
【问题描述】：

这是我之前问过的一个相关问题： Get document data from Firestore and show the data into each of the form input field using Nuxt & Vuetify

我希望我提交的数据显示在 v-text-field 输入中。

从图片中可以看出，我可以提交我的表单，我可以相应地获取数据。

名字：siradley_

但我希望它显示在 v-text-field 输入内，而不是在输入字段外。

目前，我还不知道该怎么做。

有什么帮助吗？

<template>
    <div>
        <v-container>
            <v-layout>
                <v-flex>
                    <v-card>
                        <v-card-text>
                            <v-form>
                                <v-layout>
                                    <v-row>
                                        <v-col cols="12" sm="6" md="6" v-for="(test, id) in Test">
                                            <v-text-field
                                            v-model="editedItem.name">{{ test.name }}</v-text-field>
                                            <p>Name: {{ test.name }}</p>
                                        </v-col>
                                        <v-col cols="12" sm="6" md="6">
                                            <v-btn @click="test">Test</v-btn>
                                        </v-col>
                                    </v-row>
                                </v-layout>
                            </v-form>
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    </div>
</template>

我的脚本

<script>
import firebase from "firebase/app";
import firestore from "@/plugins/firebasetest";

export default {
    middleware: "authentication",
    layout: 'dashboard',

    data: () => ({
        Test: [
            {
                name: '',
            }            
        ],

        editedItem: {
            name: '',
        } 
    }),

    created() {
        this.readTest();
    },

    methods: {
        readTest() {
            this.Test = [];
            firestore
                .collection('test')
                .doc(firebase.auth().currentUser.uid)
                .get()
                .then((doc) => {
                    this.Test.push({ ...doc.data(), id: doc.id });
                    console.log({ ...doc.data(), id: doc.id });
                })
        },

        test() {
            var data = {
                name: this.editedItem.name,
            }
            firestore
            .collection('test')
                .doc(firebase.auth().currentUser.uid)
                .set(data)
                .then((doc) => {
                window.location.reload();
                console.log({ ...doc.data, id: doc.id })
            })
        },
    },
}
</script>

【问题讨论】：

标签： firebase google-cloud-firestore nuxt.js vuetify.js

【解决方案1】：

从服务器获取值后，您必须更新数据对象中的值editedItem.name。

您在v-text-field（即v-model）上设置了两种数据绑定方式，因此您只需像这样使用v-text-field：

<v-text-field v-model="editedItem.name" ></v-text-field>

然后在从服务器获取数据后的代码中更新数据中提到的字段：

async getDataFromServerExample() {
   const data = await getData();
   this.editedItem.name = data.properFieldFromServerResponse;
}

那么一切都应该正常。

【讨论】：

您好，Hamid，不幸的是它仍然无法正常工作，我不确定如何将您的解决方案真正实施到我的解决方案中。我仍然不知道如何解决它。 :(

【解决方案2】：

终于可以解决了嘿嘿。

参考这个Unable to display data in Vue.js form after pulling from Cloud Firestore，我现在可以在我的 v-text-field 中显示我的输入数据。

我是这样做的：

<v-form>
    <v-layout>
        <v-row :items="Test">
            <v-col cols="12" sm="6" md="6"> 
                <v-text-field
                   v-model="editedItem.name"></v-text-field>
            </v-col>
            <v-col cols="12" sm="6" md="6">
                <v-btn @click="test">Test</v-btn>
            </v-col>
         </v-row>
    </v-layout>
</v-form>

<script>
import firebase from "firebase/app";
import firestore from "@/plugins/firebasetest";

export default {
    middleware: "authentication",
    layout: 'dashboard',

    data: () => ({
        editedItem: {
            name: '',
        } 
    }),

    created() {
        this.readTest();
    },

    methods: {
        readTest() {
            let _this = this;
            firestore
                .collection('test')
                .doc(firebase.auth().currentUser.uid)
                .get()
                .then((doc) => {
                    if (doc.exists) {
                        console.log("Document data:", doc.data())
                        _this.editedItem.name = doc.data().name    
                    } else {
                       console.log("No Document!"); 
                    }
                }).catch((error) => {
                    console.log("Error :(");
                })
        },
    },
}
</script>

我添加了let _this = this; 和_this.editedItem.name = doc.data().name，它可以工作。

【讨论】：