How to prevent reactivity in form placeholder

Question

I have an input field set up as

<input @input="e => machineCIDR = e.target.value" type="text" name="machine" class="form-control form-control-lg" :placeholder="machineCIDR">

The problem is, whenever someone fills out the form and then deletes it all, the placeholder is left with the last character that was filled out.

How can I setup :placeholder="machineCIDR" so that it shows the initial value, and then never gets updated again??

https://stackoverflow.com/questions/45814507/how-to-set-a-component-non-reactive-data-in-vue-2 — The Alpha, Mar 09 '20 at 21:39

score 0 · Accepted Answer · answered Mar 09 '20 at 21:47

Assuming machineCIDR is set up already (as a prop or in data), you could create an object for storing all of your initial values:

data() {
  return {
    ...
    initial: {}
  }
}

And set up the values in created:

created() {
  this.initial['machineCIDR'] = this.machineCIDR;
}

Then bind to that instead in the placeholder:

:placeholder="initial['machineCIDR']"

1 Answers1