I have a requirement to develop a Vue component that enables users to create or edit a mailing address. The existing component structure is as follows:
<template>
<v-container>
<v-form ref="form" lazy-validation>
<v-text-field
v-bind:value="address.street"
v-on:input="$emit('input', $event.target.value)"
label="Number and Street">
</v-text-field>
</v-form>
</v-container>
</template>
<script>
export default {
name: 'address-form',
props: ['address'],
// other stuff
}
</script>
The parent component receives a large object from the store and passes the address as a prop like this:
<p>Just for testing: {{outerObject.address.street}}</p>
<address-form address="outerObject.address" v-on:changed-address="changedAddress" />
Within the script...
computed: {
outerObject () {
let id = this.$route.query.id
let outerObject = this.outerObjects.find(o => o.id === id)
return (outerObject) ? outerObject : this.newOuterObject
},
...mapGetters(['outerObjects'])
However, I am facing two issues:
(1) Despite initializing outerObject correctly in the parent component (where outerObject.address.street is visible), the form's street input does not display an initial value.
(2) When typing into the form input, I encounter the following error message:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'value' of undefined"
The issue seems to be related to the use of 'value' in reference to the input. My understanding is that value is a property of both the input and $event.target. I have tried modifying 'value' to 'street' and different variations, but none have been successful so far.
My objective is to establish "two-way binding" between the form inputs and the outerObject on the parent component so that any edits made by the user reflect in the outerObject. Could you please point out what might be incorrect?