使用Nuxt&amp；Firestore时，数据不会显示在vutify v-text-field内 [英] Data not display inside vuetify v-text-field with Nuxt & Firestore

问题描述

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

我希望我提交的数据显示在v文本字段输入上。

正如您从图像中看到的，我可以提交表单并相应地获取数据。

名称：siradley_<；--这来自我的火库

但我希望它显示在v文本字段输入内部，而不是输入字段外部。

目前我还是不知道怎么做。

有关于如何操作的帮助吗？

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

推荐答案

终于可以解决了呵呵。

参考此Unable to display data in Vue.js form after pulling from Cloud Firestore，我现在可以在v文本字段中显示输入数据。

我是这样做的：

<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，它起作用了。

这篇关于使用Nuxt&amp；Firestore时，数据不会显示在vutify v-text-field内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！