Pass data to another component

Question

I have a simple form component:

<template>
    <div>
        <form @submit.prevent="addItem">
            <input type="text" v-model="text">
            <input type="hidden" v-model="id">
            <input type="submit" value="enviar">    
        </form>
    </div>
</template>

This component has a method that use $emit to add text item to a parent data:

addItem () {
    const { text } = this
    this.$emit('block', text)
},

Here is markup on my main file:

<template>
    <div id="app">
        <BlockForm @block="addBlock"/>
        <Message v-bind:message="message"/>
    </div>
</template>

And 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 question is: Message component list all items create by BlockForm component and stored inside message array. I add a edit button for each item inside Message list. How can I pass item text to be edited in BlockForm component?

Answer 1

You could just bind the input inside the BlockForm to a variable that is in the parent component. This way when you $emit from the child component, just add the value to the messages.

export default {
    name: 'app',
    components: {
        BlockForm,
        Message
    },
    data () {
        return {
            message : [],
            inputVal: {
               text: '',
               id: ''
            }
        }
    },
    methods: {
        addBlock () {

            const key = this.message.length
            this.message.push({
                name: this.inputVal.text,
                order: this.inputVal.text.length // If the logic is different here, you can just change it
            })
            this.inputVal = {
               text: '',
               id: ''
            }
        }
    }
}

Now when you are calling the BlockForm,

<template>
    <div id="app">
        <BlockForm propVal="inputVal" @block="addBlock"/>
        <Message v-bind:message="message"/>
    </div>
</template>

and inside BlockForm,

<template>
    <div>
        <form @submit.prevent="addItem">
            <input type="text" v-model="propVal.text">
            <input type="hidden" v-model="probVal.id">
            <input type="submit" value="enviar">    
        </form>
    </div>
</template>

Now, when you press edit for existing message, simple assign that "Message" to inputVal data property mapping it to proper text and id.