Level 11
take out form object
form: {
title: ''
}
Mar 4, 2020
17
Level 15
How can I assign data from a prop to a form object?
Can anybody please tell me how to assign data to a form object in a component? I pass the data to the component via a prop and that is working, so I can display this data (which is just a string to keep it simple) in the component. But in this component I have a form object and I cannot figure it out how to pass that string to the input field of the form. Here is the example:
<template>
<div>
<form @submit.prevent="submit">
<input type="text" id="title" class="input" v-model="form.title">
<button type="submit" class="button is-info" style="margin-top:25px;">Update</button>
<p v-text="title"></p>
</form>
</div>
</template>
<script>
export default {
props: [
'title'
],
data() {
return {
form: new Form({
title: ''
})
}
},
methods: {
submit() {
this.$emit('update', this.form.title );
}
}
}
</script>
I hope I put the question clear enough and thank you in advance.
Level 15
Thx for the quick reply, but that won't work since I am using the form object like here:
https://laracasts.com/series/learn-vue-2-step-by-step/episodes/21
And so I have error handling included, which is quite nice.
And the data from the prop is available. So when I add a button with a simple click event, the input field will be updated:
<button class="button is-primary" @click="applyData">Click</button>
methods: {
applyData() {
this.form.title = this.title;
}
}
This works, but off course I want this to happen just when the prop is passed to the component.
Level 1
The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component https://prepaidgiftbalance.net/
Level 18
assign value to form object inside mounted().
<script>
export default {
// Your rest of the code
mounted() {
this.form.title = this.title;
}
}
</script>
Level 53
@anaxarchos do you tried this?:
export default {
props: ['title'],
data() {
return {
form: new Form({
title: this.title
})
}
},
}
Level 3
@Sti3bas how come i get the error of entire child component failing
Level 15
@ajithlal I am sorry, this doesn't work either, and the same is true for created(). In both cases, when I console.log the title it has no value.
Level 15
@Sti3bas Thanks for your answer, but yes I tried this before, and this too does not work.
Level 53
@anaxarchos I've tested my code in a fresh Laravel app and it works. Can you show how you're passing the prop?
Level 15
@sti3bas interesting, here is the code of the parent:
<template>
<div>
<h1 v-text="title"></h1>
<title-form
ref="TitleForm"
:title="title"
@update="update"
></title-form>
</div>
</template>
<script>
import TitleForm from "../../components/bind/TitleForm";
export default {
components: {
TitleForm
},
data() {
return {
id: 15,
title: ''
}
},
created() {
this.getData();
},
methods: {
getData() {
axios.get('/pages/', {
params: {
id: this.id
}
})
.then( response => this.applyData( response.data ))
.catch( errors => console.log( errors ))
},
applyData( data ) {
this.title = data.title;
},
update( title ) {
this.title = title;
}
}
}
</script>
Maybe the problem is, that the TitleForm Component is already loaded before the ajax call has finished?
Level 15
@sti3bas Thanx for the hint: when i hardcode a title in the parent, I can use either your approach or I can use created() or mounted() and that all works. So I have to figure out, that the child component is loaded after the axios call sent the data.
Level 6
<template>
<div>
<h1 v-text="title"></h1>
<title-form
ref="TitleForm"
:title="title"
@update="update"
></title-form>
</div>
</template>
<script>
import TitleForm from "../../components/bind/TitleForm";
export default {
components: {
TitleForm
},
data() {
return {
id: 15,
title: ''
}
},
async beforeMount() {
await this.getData();
},
methods: {
async getData() {
await axios.get('/pages/', {
params: {
id: this.id
}
})
.then( response => this.applyData( response.data ))
.catch( errors => console.log( errors ))
},
applyData( data ) {
this.title = data.title;
},
update( title ) {
this.title = title;
}
}
}
</script>
Level 53
@anaxarchos yes, exactly. You can also use computed property in your child component, then it will create new form object automatically whenever props changes:
data() {
return {};
},
computed: {
form() {
return new Form({
title: this.title
});
},
},
Level 6
I don't think he can do that because is form is getting populated with error objects from server validation so that would mess-up things.
Level 15
Level 15
@mironmg Thanx for the code, but this does not work. While the method getData() is waiting for the axios reply, the TitleForm component is already been populated with an empty title from data(). At least I did not get it to work.
And using v-text in the child component does display the correct title from the prop, but this is not populated in the form object.
Level 15
Now I found a way around. I just pass the id as a prop to the child component. And there I do the axios call. Then I can apply the data to the form and emit it to the parent.
Please or to participate in this conversation.