I've created a straightforward form component:
<template>
<div>
<form @submit.prevent="addItem">
<input type="text" v-model="text">
<input type="hidden" v-model="id">
<input type="submit" value="send">
</form>
</div>
</template>
This component contains a method that uses $emit to add a text item to parent data:
addItem () {
const { text } = this
this.$emit('block', text)
},
In my main file, this is how the markup looks:
<template>
<div id="app">
<BlockForm @block="addBlock"/>
<Message v-bind:message="message"/>
</div>
</template>
And here's the script:
export default {
name: 'app',
components: {
BlockForm,
Message
},
data () {
return {
message : []
}
},
methods: {
addBlock (text) {
const { message } = this
const key = message.length
message.push({
name: text,
order: key
})
}
}
}
My query is about the Message component displaying all items created by the BlockForm component and stored within the message array. I want to add an edit button for each item in the Message list. How can I pass the edited item text back to the BlockForm component?