Recently, I've started learning Vue.js and I'm facing an issue with binding data from an input field to a span element. Instead of appending the data, it's showing me undefined
Here is the code snippet:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b2b1a184f6eaf1eaf5f2">[email protected]</a>/dist/vue.js"></script>
<div id="app">
<input type="text" v-on:keyup.enter="change(value)" value="">
<span>{{name}}</span>
</div>I'm getting an error every time I press the enter key, with undefined being appended. Any help on resolving this issue would be greatly appreciated.