Question

我是Vue.js的新手。我正在尝试将输入字段的数据与绑定到跨度数据，但不会附加它告诉我undefined

代码：-

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>

为什么当我按Enter键时却显示错误，但每次输入Enter时都会附加undefined。谁能帮我。

Answer 1

您对change方法的参数是错误的。使用这个：

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

您可以在answer中获得有关此信息的更多信息。

Answer 2

如果正确理解它，则要在span标记中反映输入值。因此，您必须将name的值绑定到input，就像使用v-model将其绑定到span标签一样，否则您所做的一切都是正确的。

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

现在，完成上述操作后，您的代码将可以反映span标签内文本框的所有更改。

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>

如何绑定输入数据和跨度文本？

2 个答案: