Vue's various ways to get form data

Preface

There are many ways to get form data in Vue, depending on which form element you are using and your needs.

1. Single form element:

If you only need to get the value of a single form element, you can usev-modelDirective binds the value of a form element to a property of the Vue instance. For example:

<input type="text" v-model="name">

Then in the Vue instance, you can passto get the value of the input box.

2. Multiple form elements:

If you need to get the values of multiple form elements, you can use the form'ssubmitEvents are handled. Add on form element@submitEvent listener and defines a method in the Vue instance to handle the commit event. For example:

<form @submit="handleSubmit">
  <input type="text" v-model="name">
  <input type="email" v-model="email">
  <button type="submit">Submit</button>
</form>

new Vue({
  data: {
    name: '',
    email: '',
  },
  methods: {
    handleSubmit() {
      (, );
    }
  }
});

In the above example, when the user submits the form,handleSubmitThe method will be called, where you can access the value of the form element.

3. Dynamic form elements

If your form elements are generated dynamically, you can use Vue's responsive data to store form data. Define an empty object or array in a Vue instance to store form data, and then usev-modelDirective binds the value of the form element to the corresponding data attribute. For example:

<div v-for="(item, index) in formItems" :key="index">
  <input type="text" v-model="">
</div>
<button @click="addFormItem">Add</button>

new Vue({
  data: {
    formItems: []
  },
  methods: {
    addFormItem() {
      ({ value: '' });
    },
    handleSubmit() {
      ();
    }
  }
});

The following are the input, radio, checkbox, select and textarea form elements respectively

1. Get the value of the input form element:

<input type="text" v-model="name">
<button @click="handleInput">Get Value</button>

new Vue({
  data: {
    name: ''
  },
  methods: {
    handleInput() {
      ();
    }
  }
});

2. Get the value of the radio form element:

<input type="radio"  value="male" v-model="gender">
<label for="male">Male</label>
<input type="radio"  value="female" v-model="gender">
<label for="female">Female</label>
<button @click="handleRadio">Get Value</button>

new Vue({
  data: {
    gender: ''
  },
  methods: {
    handleRadio() {
      ();
    }
  }
});

3. Get the value of the checkbox form element:

<input type="checkbox"  value="Apple" v-model="fruits">
<label for="apple">Apple</label>
<input type="checkbox"  value="Banana" v-model="fruits">
<label for="banana">Banana</label>
<button @click="handleCheckbox">Get Value</button>

new Vue({
  data: {
    fruits: []
  },
  methods: {
    handleCheckbox() {
      ();
    }
  }
});

4. Get the value of the select form element:

<select v-model="selectedFruit">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<button @click="handleSelect">Get Value</button>

new Vue({
  data: {
    selectedFruit: ''
  },
  methods: {
    handleSelect() {
      ();
    }
  }
});

5. Get the value of the textarea form element:

<textarea v-model="message"></textarea>
<button @click="handleTextarea">Get Value</button>

new Vue({
  data: {
    message: ''
  },
  methods: {
    handleTextarea() {
      ();
    }
  }
});

The above code example demonstrates how to use Vuev-modelDirectives bind the value of the form element and obtain the value of the form element through the data attributes of the Vue instance. You can modify and expand as needed.

Summarize

This is the end of this article about Vue's various ways to obtain form data. For more related contents of Vue to obtain form data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!