Level 4
Does anyone have idea?
May 12, 2020
4
Level 4
Passing data from child component to parent
Parent looks like this
<form @submit.prevent="updateInfo">
<div class="album_single_data">
<div class="settings-page">
<div class="select-upload">
<span>
<div class="settings-page-icon">
<span class="material-icons">camera_alt</span>
</div>
<p class="settings-p">Add a banner image</p>
<p class="settings-p">Recommended image size is 1500x500, JPG or PNG</p>
<div class="btn btn-primary">
<input class="settings-file-upload" type="file" accept="image/*">
<div class="settings-file-icon">
<span class="material-icons settings-file-icon">camera_alt</span>
Upload Banner
</div>
</div>
</span>
</div>
</div>
<div class="album_single_data settings_data">
<div class="album_single_img">
<figure class="thumbnail thumbnail-rounded">
<img class="main-profile" :src='"http://localhost:8000/img/profile/"+this.form.profilePicture' alt="">
</figure>
</div>
<div class="album_single_text">
<div class="album_btn profile_image">
<div class="btn btn-primary">
<input class="settings-file-upload" type="file" @change="updateProfilePic" accept="image/*">
<div class="settings-file-icon">
<span class="material-icons">camera_alt</span>
Upload Profile Picture. (Note: Must Be Less Than 2MB)
</div>
</div>
</div>
</div>
</div>
<nav class="navbar">
<div class="container">
<ul class="lol" role="tablist">
<li class="navbar-item">
<router-link class="navbar-link" :to="{name: 'basic'}">Basic Information</router-link>
</li>
<li class="navbar-item">
<router-link class="navbar-link" :to="{name: 'password'}">Password Update</router-link>
</li>
<li class="navbar-item">
<router-link class="navbar-link" :to="{name: 'email'}">Email Update</router-link>
</li>
<li class="navbar-item">
<a class="navbar-link" href="">Artist Url Update</a>
</li>
</ul>
</div>
</nav>
<router-view/>
<div class="settings-form">
<div class="form-group">
<button @click.prevent="updateInfo" class="btn btn-primary">Update Profile</button>
</div>
</div>
<section class="move-top"></section>
</div>
</form>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
import Swal from 'sweetalert2'
window.Swal = Swal;
window.Toast = Toast;
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
export default {
name: 'Settings',
components: {
//
},
data() {
return{
form: new Form ({
id: '',
username:'',
email: '',
password: '',
name: '',
bio: '',
twitter_handle: '',
facebook_handle: '',
instagram_handle: '',
profilePicture: ''
})
}
},
created(){
axios.get("profile")
.then(({ data })=>(this.form.fill(data)));
},
methods: {
updateInfo(){
this.$Progress.start();
this.form.put('profile')
.then(()=> {
this.$Progress.finish();
})
.catch(()=>{
this.$Progress.fail()
})
},
updateProfilePic(e){
let file = e.target.files[0];
//console.log(file);
let reader = new FileReader();
if(file['size'] < 2097152){
reader.onloadend = () => {
//console.log('RESULT', reader.result)
this.form.profilePicture = reader.result;
}
reader.readAsDataURL(file);
}else{
Toast.fire({
icon: 'error',
title: 'Ooops...',
text: 'The file you are trying to upload is more than 2MB',
})
}
}
}
}
</script>
Child Looks Like This
<template>
<div class="settings-form">
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Username</label>
<input type="text" class="form-control" id="inputEmail4" v-model="form.username">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" class="form-control" id="inputPassword4" v-model="form.name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAddress">Record Label</label>
<input type="text" class="form-control" id="inputAddress">
</div>
<div class="form-group col-md-6">
<label for="inputAddress2">Website</label>
<input type="text" class="form-control" id="inputAddress2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputAddress2">Biography</label>
<textarea class="text-width" name="" id="" cols="30" rows="10" v-model="form.bio"></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputCity">Twitter Handle</label>
<input type="text" class="form-control" v-model="form.twitter_handle">
</div>
<div class="form-group col-md-4">
<label for="inputState">Facebook URL</label>
<input type="text" class="form-control" v-model="form.facebook_handle">
</div>
<div class="form-group col-md-2">
<label for="inputZip">Instagram Username</label>
<input type="text" class="form-control" v-model="form.instagram_handle">
</div>
<div class="form-group col-md-2">
<label for="inputZip">Youtube URL</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<select class="form-control" name="genre">
<option value="">Choose a genre</option>
<option value="H">Hip-Hop</option>
<option value="A">Afro-Beat</option>
</select>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
import Swal from 'sweetalert2'
window.Swal = Swal;
window.Toast = Toast;
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
onOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
export default {
props: ['Form'],
name: 'Settings',
components: {
//
},
data() {
return{
form: new Form ({
id: '',
username:'',
email: '',
password: '',
name: '',
bio: '',
twitter_handle: '',
facebook_handle: '',
instagram_handle: '',
profilePicture: ''
})
}
},
created(){
axios.get("profile")
.then(({ data })=>(this.form.fill(data)));
},
methods: {
updateInfo(){
this.$emit('profile')
},
updateProfilePic(e){
let file = e.target.files[0];
//console.log(file);
let reader = new FileReader();
if(file['size'] < 2097152){
reader.onloadend = () => {
//console.log('RESULT', reader.result)
this.form.profilePicture = reader.result;
}
reader.readAsDataURL(file);
}else{
Toast.fire({
icon: 'error',
title: 'Ooops...',
text: 'The file you are trying to upload is more than 2MB',
})
}
}
}
}
</script>
When i click on submit the form does not update in the data base.
What am i doing wrong pease?
Level 29
What is the part that you are struggling with? You ask Passing data from child component to parent what data ?
Level 4
@wingly the submit button is on the parent component, but when i click it the child form does not update in the database.
How can i ensure when i click the button everything is updated.
Level 29
Where is the child component in your parent markup? I don't see it
Please or to participate in this conversation.