How to display input value in div when input value changes in VueJS?

Question

I would like, to capture the value of my input and display on another div.

Look my code :

If you look the code, I save the value in function msgFunc, and after that I would apply this result in my variable msg, but I don't understand.

export default {
        data () {
            return {
                msg: ''
            }
        },
        computed: {
            msgFunc: () => {
                return this.value
            }
        }
    }

.flex {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        height: 90%;
    }
    .input-container {
        width: 410px;
        background-color: #fff;
        padding: 2px 15px 20px 15px;
        box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3);
        transition: transform .1s ease-in-out;
    }
    .input-container input {
        margin-top: 10px;
        width: 100%;
        border-bottom: 1px solid #25A3FF;
        padding: 10px 0;
        font-size: 16px;
        color: #929292;
    }
    input:focus {
        outline: none;
    }

<div class="flex">
        <section class="input-container">
            <input type="text" v-model="msg" @change="msgFunc" placeholder="Type your HEX color">
            <h3>{{msg}}</h3>
        </section>
    </div>

v-model is already updating the value of msg on its own. I'm not sure what you're trying to accomplish — thanksd
– thanksd, Commented Aug 15, 2017 at 17:00

reinerBa · Accepted Answer · 2017-08-15 17:13:20Z

1

Just delete the computed property msgFunc and the @change attribute I made a fiddle where it works https://jsfiddle.net/50wL7mdz/53734/

if you want to trigger something with @change, please use the methods section, not computed.

answered Aug 15, 2017 at 17:13

reinerBa

1,6601 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roy J Over a year ago

Possibly want the .lazy modifier. Hard to tell from the original post.

Collectives™ on Stack Overflow

How to display input value in div when input value changes in VueJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related