I made user information page and users can change and update their information. I want to display the data and fill form inputs automatically with get request data.
<template>
<div>
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<div >
<img src="../../assets/people/a2.jpg" alt="Avatar" >
</div>
<h5 >B</h5>
<h6 >[email protected]</h6>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<div >
<div >
<h6 >Profil Detayı</h6>
</div>
<div >
<div >
<label for="first_name">İsim</label>
<input type="text" id="first_name" placeholder="İsim" :value="first_name" required :disabled="!isEditable">
</div>
</div>
<div >
<div >
<label for="last_name">Soyisim</label>
<input type="text" id="last_name" placeholder="Soyisim" v-model="last_name" :disabled="!isEditable">
</div>
</div>
<div >
<div >
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" :value="username" disabled>
</div>
</div>
<div >
<div >
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email" v-model="email" disabled>
</div>
</div>
<div >
<div >
<label for="gsm_number">Telefon</label>
<input type="text" id="gsm_number" placeholder="Telefon" v-model="gsm_number" :disabled="!isEditable">
</div>
</div>
<div >
<label for="gsm_number">Şifre</label>
<b-input-group>
<b-form-input type="password" id="password" placeholder="Şifre" v-model="password" :disabled="!isEditable"></b-form-input>
<template #append>
<b-button v-b-modal.modal-prevent-closing variant="default" @click="passwordModal"><i ></i> </b-button>
<b-modal
id="modal-prevent-closing"
ref="modal"
title="Şifre Değiştir"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Mevcut Şifre"
label-for="password"
invalid-feedback="Mevcut şifrenizi giriniz"
>
<b-form-input type="password" id="password"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre"
label-for="new_pass"
invalid-feedback="Yeni şifrenizi giriniz"
>
<b-form-input type="password" id="new_pass"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre Doğrulama"
label-for="new_pass_con"
invalid-feedback="Yeni şifrenizi tekrar giriniz"
>
<b-form-input type="password" id="new_pass_con"
></b-form-input>
</b-form-group>
</form>
</b-modal>
</template>
</b-input-group>
</div>
</div>
<div >
<b-button v-if="!isHidden" v-on:click="isHidden = true" variant="default" @click="editProfile"><i id="editButton"></i> </b-button>
<b-button variant="default" @click="saveProfile"><i id="saveButton"></i> </b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Is there an option to just call userinfo and fill all inputs? Or should I do the same thing this.username = res.data for all my inputs like first_name, last_name etc.? Here is my methods:
<script>
import axios from 'axios'
export default {
name:'ProfilePage',
data(){
return{
isEditable:false,
isHidden:false,
username:"",
userinfo:[]
}
},
methods:{
getProfile(){
if(this.$route.params.id == undefined || this.$route.params.id == null){
axios.get(`/v1/management/update_user/`)
.then(res=>{console.log(res)
this.username = res.data
})
}else {
axios.get(`/v1/management/update_user/${this.$route.params.id}`)
.then(res=>{console.log(res)
this.username = res.data
})
}
},
editProfile(){
this.isEditable = !this.isEditable
},
saveProfile(){
},
passwordModal(){
},
checkResetPassword(){
if(this.new_pass!== this.new_pass_con){
this.$toasted.error("Şifreler farklı!"),{
action: {
text: 'Kapat',
onClick: (e, toastObject) => {
toastObject.text("").goAway(10);
}
}
}
}else {
this.$toasted.success("İşlem başarılı!"),{
action: {
text: 'Kapat',
onClick: (e, toastObject) => {
toastObject.text("").goAway(10);
}
}
}
}
}
},
mounted() {
this.getProfile()
}
}
</script>
CodePudding user response：
Update
<template>
<div>
<div >
<label for="username">Username</label>
<input id="username" type="text" placeholder="Username" :value="userinfo.username" disabled>
<input id="email" type="text" placeholder="email" :value="userinfo.email" disabled>
<input id="website" type="text" placeholder="website" :value="userinfo.website" disabled>
<button @click="fetchUser">fetch some user</button>
<p>Actual user info object: <pre>{{ userinfo }}</pre></p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userinfo: {}
}
},
methods: {
async fetchUser() {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
const data = await response.json()
this.userinfo = data
},
}
}
</script>
This kind of basic code should totally work
<template>
<div>
<div >
<label for="username">Username</label>
<input type="text" id="username" placeholder="Username" :value="username" disabled>
<button @click="fetchUser">fetch some user</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: 'nick'
}
},
methods: {
async fetchUser() {
const response = await fetch('https://jsonplaceholder.typicode.com/users/1')
const data = await response.json()
this.username = data.username
},
}
}
</script>
Here is a playground.
CodePudding user response：
You can use v-model to bind the data into the form fields. For demo purpose instead of v-for, I am directly binding the value based on index.
Working Demo :
const app = new Vue({
el: '#app',
data() {
return {
userInfo: []
}
},
mounted() {
this.getProfile();
},
methods: {
// Just for demo I am directly assigning the mock response in userInfo array. You can replace that with API call response.
getProfile() {
this.userInfo = [{
username: 'alpha'
}]
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
UserName : <input type="text" v-model="userInfo[0].username">
</div>