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>

在此输入元素中，我添加了:value attr和一个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;
            });
    }
}

Answer 3

就像亚历山大所说，不要同时使用：value和v-model。这是因为v模型创建了two-way binding。它结合了：value和@change。绑定输入后，您应该忘记输入，而将注意力集中在模型上。

如果“ example@email.com”是占位符，为什么不使用placeholder attribute？

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

3 个答案: