占位符不是占位符vue前端

Question

你好，我现在遇到了一个很小但很烦人的问题。

我正在尝试显示当前用户的信息(不是密码或不可更新)，但我的占位符应该使用的名称没有显示，因为我放在更新配置文件，这是我要更新的数据，更改任何建议，我可以这样做？或者帮助？

<v-text-field
                        type="text"
                        placeholder="user.fullname"
                        v-model="UpdateProfile.fullname"
                    ></v-text-field>
                    <v-text-field
                        
                        type="email"
                        v-model="email"
                        placeholder="$user.email"
                    > </v-text-field>

profile上的完整代码

<template>
    <v-container>
        <div class="col-md-5 col-sm-12 mx-auto">
            <v-card
                class="pa-5"
                elevation="3"
            >
                <v-form class="col-12 pa-0"> 
                    <h2 class="text-center">Profile Page {{ fullname }}</h2>
                    
                    <v-text-field
                        type="text"
                        placeholder="user.fullname"
                        v-model="UpdateProfile.fullname"
                    ></v-text-field>
                    <v-text-field
                        
                        type="email"
                        v-model="email"
                        placeholder="$user.email"
                    > </v-text-field>
                    
                    <v-text-field
                        
                        type="text"
                        v-model="phone"
                        placeholder="$user.phone"
                    > </v-text-field>
                        
                    <v-text-field
                        label="New password?"
                        type="password"
                       
                        class="pr-2"
                    > </v-text-field>

                    <v-text-field
                        label="Reapeat password"
                        type="password"
                       
                        class="pr-2"
                    > </v-text-field>

                    <div class="row ma-0">
                        <v-text-field
                            
                            type="text"
                            v-model="address.street"
                            class="pr-2"
                            placeholder="$user.street"
                        > </v-text-field>

                        <v-text-field
                            
                            type="text"
                            v-model="address.number"
                            placeholder="$user.address.number"
                        > </v-text-field>
                    </div>

                    <div class="row ma-0">
                        <v-text-field
                            
                            type="number"
                            v-model="address.zip"
                            class="pr-2"
                            placeholder="$user.address.zip"
                        > </v-text-field>

                        <v-text-field
                            
                            type="text"
                            v-model="address.city"
                            placeholder="$user.address.city"
                        > </v-text-field>
                    </div>

                    <v-btn
                        block
                        color="primary"
                        v-on:click="onUpdateProfile()"
                    >
                        Update userinfo
                    </v-btn>
                </v-form>
            </v-card>
        </div>
        
    </v-container>
</template>

<script>
export default{
    data() {
        return {
            email: null,
            fullname: null,
            password: null,
            phone: null,
            address: {
                street: null,
                number: null,
                zip: null,
                city: null
            },

            UpdateProfile:{
            email: "",
            fullname: "",
            password: "",
            phone: "",
            address: {
                street: "",
                number: "",
                zip: "",
                city: ""
            } 
            }
        };
    },
    

    mounted: function() {
        this.axios.post('http://localhost:3000/auth', null, { 
            headers: { 
                jwt: this.$cookies.get('jwt'),
            }
        })
        .then((res) =>{
            console.log(res)
            this.fullname = res.data.user.fullname;
            this.email = res.data.user.email;
            // this.password = res.data.user.password;
            this.phone = res.data.user.phone;
            this.address = res.data.user.address;
            

        }).catch(err => {
            console.log(err);
            this.$router.push('/*');
        });
                        
        
    },
    

    methods: {
        onUpdateProfile: function() {
            // Validere om passwords matcher
                // if(this.register.password != this.register.confirmPassword) {
                //     this.error = "Passwords matcher ikke";
                //     this.loading = false;
                //     return;
                // }

            // Send post request om at update brugeren
            this.axios.post('http://localhost:3000/update', {user: this.UpdateProfile}, { 
            headers: { 
                jwt: this.$cookies.get('jwt'),
            }
            })
            .then((res) => {
                console.log(res)
                this.$router.push('/dashboard');
            }).catch(err => {
                // Fejled respons
                console.log(err);
                this.$router.push('/*');
            });
            
        },
        
    }
}

</script>
<style>
</style>

代码可以工作，但我不知道如何同时实现两者，以显示和更改，帮助

​

​

Answer 1

在HTML语言中，一个属性(name="")总是一个string。

在Vue中，绑定(:name="")将始终为JavaScript。

因此，您可能正在寻找:placeholder="user.fullname"。

或者，如果未定义user.fullname，则可以使用条件回退：

:placeholder="user.fullname ? user.fullname : 'Full name'"