How to bind the input data enter with span text?

Question

I'm new in Vue.js. I'm trying to bind the data of the input field with the to the span data but it will not appending it tells me undefined

Code:-

 new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0, name: "hello" }, methods: { increment: function(step, $event) { this.counter += step }, decrement: function(step, $event) { this.counter -= step }, points: function(event) { this.x = event.clientX; this.y = event.clientY; }, alert: function(event) { alert("alert!") }, change: function(value) { this.name = this.name + value } } });

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <input type="text" v-on:keyup.enter="change(value)" value=""> <span>{{name}}</span> </div>

Why this will showing me error when I will press enter key but it will append undefined on every enter press. Can anyone help me.

Answer 1

your argument to your change method is wrong. Use this one:

<input type="text" v-on:keyup.enter="change($event.target.value)"> .

You can get more information regarding this in here .

Answer 2

If am understanding it correctly, you want to reflect the input value in the span tag. So you got to bind the name value to the input the same way you have bound it to span tag using v-model , else everything else you did is right.

<input type="text" v-on:keyup.enter="change(value)" v-model="name" />

Now once you have done the above, your code will work to reflect any changes to the text box inside of the span tag.

 new Vue({ el: "#app", data: { counter: 0, x: 0, y: 0, name: "hello" }, methods: { increment: function(step, $event) { this.counter += step }, decrement: function(step, $event) { this.counter -= step }, points: function(event) { this.x = event.clientX; this.y = event.clientY; }, alert: function(event) { alert("alert!") }, change: function(value) { this.name = this.name + value } } });

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <div id="app"> <input type="text" v-on:keyup.enter="change(value)" v-model="name" /> <span>{{name}}</span> </div>