[Vuejs]-How to bind the input data enter with span text?

by

0👍

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.

0👍

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>

Leave a comment