Reset placeholder to default in a Vue JS form after submission

Question

I am wanting to reset the name value in a swatch generator I am building, after the swatch is published, but struggling to get it right. Firstly, all the values in the app, 2 colors and swatch name, are watched and emitted. Here is the name value ( value3 ) but the colors are set up the same, just value1 and value2 (not resetting the colors)

<b-form-input
        id="name"
        size="lg"
        type="text"
        class="search-bar"
        placeholder="Name Your Swatch and Enter to Save"
        v-model="value3"
        ref="value3"
        :value="value3"
        @keypress="publishSwatch"
        >
</b-form-input>

and what collects the name is here:

props: ['value'],

publishSwatch(e) {
  this.$emit('input', {
    value3: +this.$refs.value3.value,
  });
  if (e.key == "Enter") {
    this.createSwatch();
    this.resetForm(); //Not done yet
    this.handleSwatch();
  }
}

the relevant working part of the createSwatch function is just:

let name = (`${this.value3}`);  //this works fine to set and output the inputted value

resetForm() {
// Stuck for what to put here
}

After the swatch is published I want to reset the placeholder to the default in resetForm() function, which I can place at the relevant place in publishSwatch method, which should be as above, but can't get anywhere near to getting it right. The colors are in another function and not resetting those. I have tried this, but it seems to have no relevance to how the inputs are set up:

resetForm() {
    let clear = document.getElementById('name');
    clear.input.value.reset();
}

And doesn't work

Tips welcome.

Thanks

Answer 1

• Don't use :value and v-model together, because v-model creates :value automatically so there would be a conflict.
• There is no need for a ref because the correct way is to use the v-model binding ( value3 ) in the instance instead of a DOM value

HTML

<b-form-input
    id="name"
    size="lg"
    type="text"
    class="search-bar"
    placeholder="Name Your Swatch and Enter to Save"
    v-model="value3"
    @keypress="publishSwatch">
</b-form-input>

Methods should look like this:

methods: {
  publishSwatch(e) {
    this.$emit('input', {
      value3: +this.value3
    });
    if (e.key == "Enter") {
      this.createSwatch();
      this.resetForm();
      this.handleSwatch();
    }
  },
  resetForm() {
    this.value3 = ''; // <-- Reset the instance value
  }
}

Here is a demo