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

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

jamey.kohler

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

18 | 0

1 ответ

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

clifford

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

@jamey.kohler

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

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

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

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

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

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

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

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

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

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

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

0 | 0

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

1 ответ

Похожие обсуждения: