主页 / 问题 / 774460
Accepted
Дмитрий Полянин
Asked:2020-01-23 17:30:03 +0000 UTC2020-01-23 17:30:03 +0000 UTC

为什么 input.value 第二次不改变

  • 772

我进行输入，输入数据，它立即将它们替换为“11.11”，这对我来说应该是这样的。但是如果在这个替换之后我继续输入数据，它就会停止替换它们，我不明白这个。

我有它 v-bind:value="val"，理论上，如果我覆盖this.val它，它应该在输入中显示它。它会改变自己val，我推断它，但不是在输入中。

Vue.component('currency-input', {
  template: `<span>
      <input
        v-bind:value="val"
        v-on:input="updateValue($event.target.value)"> val: {{val}}
    </span>`,
  data: function() {
    return {
      val: ""
    };
  },
  methods: {
    updateValue: function(value) {
      this.val = "11.11";
    }
  }
});

// создание корневого экземпляра
var app = new Vue({
  el: '#app',
  template: `<div>
                    <currency-input></currency-input>
                    </div>`,

})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">

</div>

javascript

2 个回答

  1. Best Answer

    问题是 vue 在绑定数据时使用依赖跟踪，并且只更改已更改的内容。

    当您val一遍又一遍地为同一个属性分配相同的值时，它不会改变，因此不会导致绑定更新。

    只有在一次只有一个更改源时才应使用数据绑定，而不应在两个数据源（您和用户）争夺同一属性时使用。

    v-model它之所以有效，是因为 val 属性首先写入用户的数据，然后是您的数据。但这不是解决方案：通过使用v-model，您不能再保证该属性val包含您需要的内容。

    在这种情况下，直接使用元素是正确的。

    PS如果您试图以这种狡猾的方式过滤输入字符，最好通过preventDefault()而不是通过值分配来阻止不需要的字符。赋值给 value 会重置文本光标的当前位置。

    • 4

  2. 有两种选择：

    A.v-model用于双向绑定：

    <input v-model="val" v-on:input="updateValue($event.target.value)">

    B. 链接到input：

    <input ref="input" v-bind:value="val" v-on:input="updateValue($event.target.value)">

    并显式更新方法updateValue中输入字段的值：

    this.$refs.input.value = this.val;

    文档

    • 2

相关问题