如何在 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>

在这个输入元素中，我添加了: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

正如 Alexander 所说，不要将 :value 和 v-model 一起使用。这是因为 v-model 创建了一个two-way binding。它结合了:value 和@change。绑定输入后，您应该忘记输入并专注于模型。

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

Answer 4

您好，我通过这种方式解决了这个问题：

 <input
   placeholder="Name"
   class="block w-full bg-grey-lighter text-grey-600 border placeholder 
   gray-500 border-indigo-200 rounded-lg h-10 px-4 focus:ring focus:ring- 
   indigo-300 "
   type="text"
   v-model="form.name" 
/>


data:() => ({
   form:{
      name: "",
      note: "",
      selected: 0,
      gender: 0

   }
}),
porps: {
  contact: {
     type: Object
   }
},
whatch: {
   contact: {
      immediate: true,
      handler(val, oldVal) {
         this.form =  {
              name: val.name,
              note: val.note,
              selected: val.seleted,
              gender: val.gender
          }
      }
   }
}