提交后在 Vue JS 表单中将占位符重置为默认值

Question

我想在我正在构建的样本生成器中重置名称值，在样本发布后，但努力让它正确。首先，应用程序中的所有值，2 种颜色和样本名称，都被观察和发出。这是名称值（value3），但颜色设置相同，只是 value1 和 value2（不重置颜色）

<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>

而收集名字的就在这里：

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();
  }
}

createSwatch 函数的相关工作部分只是：

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

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

样本发布后，我想在resetForm()函数中将占位符重置为默认值，我可以将其放置在publishSwatch方法中的相关位置，应该如上，但无法靠近做对了。颜色在另一个函数中，而不是重置那些。我已经尝试过了，但它似乎与输入的设置方式无关：

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

而且不工作

欢迎提示。

谢谢

Answer 1

• 不要同时使用:value 和v-model，因为v-model 会自动创建:value，这样会产生冲突。
• 不需要ref，因为正确的方法是在实例中使用v-model 绑定(value3) 而不是DOM 值

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: {
  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
  }
}

这是demo