Vue: using one of the props for v-model and access the same prop in the created hook, then first modification to the prop via v-model is reset

[zongsheng-zhao]

Version

2.5.13

Reproduction link

https://jsfiddle.net/wa3t63gy/

Steps to reproduce

select all the text in the text input, and then press backspace to delete it.

What is expected?

the text inside input should be deleted

What is actually happening?

the text inside input should be deleted, but restored immediately

---

not only the deletion, but also the modification will be reset, if it's the first modification

[Akryum]

Issues are for bug reporting. You can ask questions on the discord or forums.

---

Props are read-only, and you are trying to mutate yours with v-model. Thus if you change the input value, the prop is not modified and the value is restored on the next update.

Use a data property or a computed setter instead:

computed: {
  propModel: {
    get () { return this.prop },
    set (value) { this.$emit('update:prop', value) },
  },
},

Computed setters
Prop .sync modifier