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

Question

我想更新一些输入字段

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

 new Vue({
  el: '#app',
  data: {
    record: {
      email: '[e-mail]'
    },
    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>

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

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

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

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

我还尝试添加 :name=“…” 而不是 :value=“…”

http://jsfiddle.net/to9xwL75/

原文由 Greg Ostry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能希望将 初始/默认值 放在 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: '[e-mail]'
      }
    }
  }
})

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

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

原文由 Yom T. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

 data() {
  return {
    record: {
      email: ''
    }
  }
},
mounted() {
  setTimeout(() => {
    this.record.email = '[e-mail]'
  }, 500)
}

原文由 Alexander Kim 发布，翻译遵循 CC BY-SA 4.0 许可协议