如何在 Vue.js 中的同一元素上使用 :value 和 v-model

Question

我想更新一些输入字段

所以我创建了一个输入元素：

new Vue({
  el: '#app',
  data: {
    record: {
      email: 'example@email.com'
    },
    editing: {
      form: {}
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" :value="record.email" v-model="editing.form.email">
  <pre>{{ editing.form.email }}</pre>
</div>

在此输入元素中，我添加了:valueattr 和v-model

不幸的是我收到一个错误：

与同一元素上的 v-model 冲突，因为后者已经在内部扩展为值绑定

用数据填充输入字段然后更新它的最佳解决方案是什么？

我还尝试添加 :name="..." 而不是 :value="..."

http://jsfiddle.net/to9xwL75/

Answer 1

不要:value与v-model一起使用。

用于mounted()更新模型并预填充输入值：

data() {
  return {
    record: {
      email: ''
    }
  }
},
mounted() {
  setTimeout(() => {
    this.record.email = 'example@email.com'
  }, 500)
}

Answer 2

您可能希望将初始/默认值放在对象上data，并且双向绑定应该与v-model. 只需删除editing.form.email并尝试以下操作：

<div id="app">
  <input type="text" v-model="record.email">
  <pre>{{ record.email }}</pre>
</div>

new Vue({
  el: '#app',

  data() {
    return {
      record: {
        email: 'example@email.com'
      }
    }
  }
})

如果您需要使用动态值填充此字段，您可以添加处理程序方法并在获取数据时更新输入元素：

methods: {
    getData() {
        axios.get('/some-url')
            .then(data => {
                this.record.email = data.email;
            });
    }
}