Cara melaksanakan penyerahan dan penyuntingan borang vue

Untuk melaksanakan penyerahan dan penyuntingan borang dalam Vue, anda perlu mempertimbangkan tiga aspek berikut:

1. Pengikatan dan pengubahsuaian data borang
2. Pemprosesan data selepas menyerahkan borang
3. Pengisian semula data semasa mengedit borang

Seterusnya, kami akan memperkenalkan kaedah pelaksanaan penyerahan dan penyuntingan borang Vue secara terperinci daripada tiga aspek di atas.

1. Pengikatan dan pengubahsuaian data borang

Untuk mencapai pengikatan dan pengubahsuaian data borang dalam Vue, anda perlu menggunakan arahan model v, yang melaluinya anda boleh mengikat borang ke dalam data contoh komponen. Sebagai contoh, kita boleh melaksanakan pengikatan bentuk mudah melalui kod berikut:

<template>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name">

    <label for="age">Age:</label>
    <input type="number" id="age" v-model="age">

    <button type="submit" @click.prevent="submitForm()">Submit</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        age: ''
      }
    },
    methods: {
      submitForm() {
        // 表单提交逻辑
      }
    }
  }
</script>

Dalam kod di atas, kita mengikat nama dan umur dalam bentuk kepada nama contoh komponen melalui model v arahan dan data umur. Apabila data dalam borang berubah, Vue akan menyegerakkan data yang diubah secara automatik kepada data contoh komponen.

2. Pemprosesan data selepas penyerahan borang

Selepas borang diserahkan, kami perlu memproses data borang. Di sini kita boleh melaksanakan penyerahan borang melalui fungsi pengendalian acara. Dalam Vue, nama acara penyerahan borang ialah serah Kita boleh mengikat kaedah submitForm() dalam komponen kepada acara serah,

Sebagai contoh:

<form @submit.prevent="submitForm()">

Dengan cara ini, apabila pengguna menyerahkan Apabila membentuk borang, kaedah submitForm() akan dipanggil. Dalam kaedah submitForm(), kita boleh mendapatkan data dalam borang dan memprosesnya dengan sewajarnya. Sebagai contoh, kami boleh menyerahkan data borang ke pelayan untuk penyimpanan:

export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    async submitForm() {
      const formData = {
        name: this.name,
        age: this.age
      }

      // 提交表单数据到服务器端
      await axios.post('/api/user', formData)

      // 处理完数据之后重置表单
      this.name = ''
      this.age = ''
    }
  }
}

Apabila data borang diserahkan kepada pelayan, kami menetapkan semula data dalam borang, membenarkan pengguna memasukkan semula yang baharu data.

3. Isi semula data semasa mengedit borang

Dalam aplikasi praktikal, kami biasanya perlu menyokong pengguna untuk mengedit data, dan kemudian kami perlu mengisi semula data ke dalam borang. Dalam Vue, kita boleh mendapatkan data dari bahagian pelayan dalam fungsi cangkuk mount() dan mengisi semula data ke dalam borang. Sebagai contoh, kita boleh menggunakan kod berikut untuk melaksanakan isian semula data apabila pengguna mengedit data:

mounted() {
  // 获取用户数据并回填到表单中
  axios.get('/api/user/' + this.uid).then(response => {
    const data = response.data
    this.name = data.name
    this.age = data.age
  })
},

Dalam kod di atas, kami memperoleh data daripada pelayan dan mengisi semula data ke dalam borang. Apa yang perlu diperhatikan di sini ialah kita perlu mengisi semula data ke dalam contoh komponen supaya data boleh terikat pada borang.

Ringkasan

Melalui pelaksanaan tiga aspek di atas, kami boleh melaksanakan penyerahan dan penyuntingan borang Vue dengan cekap. Perlu diingat bahawa dalam Vue, fungsi pengikatan data dan pengendalian acara borang boleh dilaksanakan melalui model v dan arahan @event. Arahan ini membolehkan kami melaksanakan fungsi penyerahan borang dengan mudah dan cekap. Pada masa yang sama, kami juga boleh mendapatkan data daripada pelayan melalui fungsi cangkuk mounted() dan mengisi semula data ke dalam borang, supaya pengguna boleh mengedit data dengan mudah.

Atas ialah kandungan terperinci Cara melaksanakan penyerahan dan penyuntingan borang vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!