javascript - 当设置为禁用时，Vue会重置“输入”字段

设置为禁用时，Vue为什么会重置文本输入字段？普通的Javascript不会发生这种情况，textarea不会发生这种情况。

var app = new Vue({
  el: '.container',
  data: {
  	disabled: false,
  	fn: "John",
  	ln: "Smith",
  	com: "My comment here..."
  },
  methods: {
  	vue_disable() {
  		this.disabled = !this.disabled;
  	}
  }
});

function js_disable() {
  document.getElementById("first_name").disabled = !document.getElementById("first_name").disabled;
  document.getElementById("comment").disabled = !document.getElementById("comment").disabled;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <h1>Vue disable fields</h1>

  <p>22 Aug 2019</p>

  <p>Why does an INPUT text field reset when I set the field to disabled with Vue? It doesn't happen with pure Javascript, and doesn't happen with a TEXTAREA.</p>

  <p>Type something new into the the First Name field then click the first button. The value you entered disappears and the original value is substituted.<p>

<form>
  <div class="form-group">
    <label>First Name</label>
      <input type="text" class="form-control" id="first_name" :disabled="disabled" :value="fn"/>
  </div>
  <div class="form-group">
    <label>Last name</label>
    <input type="text" class="form-control" id="last_name" :value="ln"/>
  </div>
  <div class="form-group">
    <label>Comment</label>
    <textarea rows="4" class="form-control" id="comment" v-html="com" :disabled="disabled">

      </textarea>
  </div>
  <p>
    <button type="button" class="btn btn-default" @click="vue_disable">Disable / Enable 'First Name' and 'Comment' fields with Vue</button>
  </p>
</form>
    <p>
      <button type="button" class="btn btn-default" onclick="js_disable()">Disable / Enable 'First Name' and 'Comment' fields with Javascript</button>
  </p>

</div>

https://codepen.io/MSCAU/pen/jONVRRj

最佳答案

使用v-model而不是:value
从documentation:


value属性仅设置输入的初始值。

Vue使用Object.defineProperty将getter / setter添加到data内的所有属性中。触发依赖项的setter时，它会通知观察者，并重新提供组件(documentation)。由于更改了disabled属性，因此重新渲染了整个组件，并将value设置为data中的内容

var app = new Vue({
  el: '.container',
  data: {
    disabled: false,
    fn: "John",
    ln: "Smith",
    com: "My comment here..."
  },
  methods: {
    vue_disable() {
      this.disabled = !this.disabled;
    }
  }
});

function js_disable() {
  document.getElementById("first_name").disabled = !document.getElementById("first_name").disabled;
  document.getElementById("comment").disabled = !document.getElementById("comment").disabled;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
    <p>
      <form>
        <div class="form-group">
          <label>First Name</label>
          <input type="text" class="form-control" id="first_name" :disabled="disabled" v-model="fn" />
        </div>
        <div class="form-group">
          <label>Last name</label>
          <input type="text" class="form-control" id="last_name" v-model="ln" />
        </div>
        <div class="form-group">
          <label>Comment</label>
          <textarea rows="4" class="form-control" id="comment" v-html="com" :disabled="disabled">
      </textarea>
        </div>
        <p>
          <button type="button" class="btn btn-default" @click="vue_disable">Disable / Enable 'First Name' and 'Comment' fields with Vue</button>
        </p>
      </form>
      <p>
        <button type="button" class="btn btn-default" onclick="js_disable()">Disable / Enable 'First Name' and 'Comment' fields with Javascript</button>
      </p>

</div>