Как правильно очистить форму во vue.js?

Пользователь

от jamey.kohler , в категории: JavaScript , 8 месяцев назад

Как правильно очистить форму во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от clifford , 7 месяцев назад

@jamey.kohler 

Для очистки формы во Vue.js можно использовать несколько способов, но вот несколько примеров наиболее распространенных:

  1. Использование директивы v-model:


Если вы используете директиву v-model для привязки значений элементов формы к свойствам в объекте Vue, то можно просто очистить эти свойства в методе, вызываемом при отправке формы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="form.name">
    <input type="email" v-model="form.email">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
      }
    }
  },
  methods: {
    submitForm() {
      // ... do something with the form data ...
      // clear the form after submission
      this.form.name = ''
      this.form.email = ''
    }
  }
}
</script>


  1. Использование референсов:


Если вы используете референсы для получения значений элементов формы, то можно просто сбросить значения элементов в методе, вызываемом при отправке формы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <form @submit.prevent="submitForm">
    <input type="text" ref="nameInput">
    <input type="email" ref="emailInput">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // ... do something with the form data ...
      // clear the form after submission
      this.$refs.nameInput.value = ''
      this.$refs.emailInput.value = ''
    }
  }
}
</script>


  1. Использование события reset:


Вы можете использовать событие reset для формы, которое сбрасывает все элементы формы в их исходные значения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <form @submit.prevent="submitForm" @reset="resetForm">
    <input type="text" v-model="form.name">
    <input type="email" v-model="form.email">
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        email: '',
      }
    }
  },
  methods: {
    submitForm() {
      // ... do something with the form data ...
    },
    resetForm() {
      // reset the form after reset button is clicked
      this.form.name = ''
      this.form.email = ''
    }
  }
}
</script>


Независимо от того, какой метод вы выбрали, важно убедиться, что значения элементов формы были очищены перед отправкой формы или после ее сброса, чтобы избежать ошибок или непредвиденного поведения.