Vueフォームの送信と編集を実装する方法

Vue でフォームの送信と編集を実装するには、次の 3 つの側面を考慮する必要があります:

1. フォーム データのバインドと変更
2. フォーム送信後のデータ処理
3. フォーム編集時のデータバックフィル

次に、Vueのフォーム送信・編集の実装方法を上記3つの側面から詳しく紹介していきます。

1. フォーム データのバインドと変更

Vue でフォーム データのバインドと変更を実装するには、v-model ディレクティブを使用する必要があります。フォームをコンポーネント インスタンスのデータに変換します。たとえば、次のコードを使用して単純なフォーム バインディングを実装できます。

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

上記のコードでは、v-model を通じてフォーム内の名前と年齢をコンポーネント インスタンスの名前と年齢にバインドします。データ内のディレクティブ。フォーム内のデータが変更されると、Vue は変更されたデータをコンポーネント インスタンスのデータと自動的に同期します。

2. フォーム送信後のデータ処理

フォームの送信後、フォーム データを処理する必要があります。ここでは、イベント処理関数を通じてフォーム送信を実装できます。 Vue では、フォーム送信のイベント名は submit です。コンポーネント内の submitForm() メソッドを送信イベントにバインドできます (

例:

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

この方法でユーザーが送信する場合) form では、 submitForm() メソッドが呼び出されます。 submitForm() メソッドでは、フォーム内のデータを取得し、それに応じて処理できます。たとえば、フォーム データを保存するためにサーバーに送信できます。

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 = ''
    }
  }
}

フォーム データがサーバーに送信されると、フォーム内のデータがリセットされ、ユーザーが新しいデータを再入力できるようになります。

3. フォーム編集時のデータのバックフィル

実際のアプリケーションでは、通常、ユーザーによるデータの編集をサポートしてから、データをフォームにバックフィルする必要があります。 Vue では、mounted() フック関数でサーバー側からデータを取得し、そのデータをフォームにバックフィルできます。たとえば、次のコードを使用して、ユーザーがデータを編集するときにデータ バックフィルを実装できます。

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

上記のコードでは、サーバーからデータを取得し、そのデータをフォームにバックフィルします。ここで注意する必要があるのは、データをフォームにバインドできるように、データをコンポーネント インスタンスにバックフィルする必要があるということです。

概要

上記の 3 つの側面を実装することで、Vue フォームの送信と編集を効率的に実装できます。 Vue では、フォームのデータ バインディングとイベント処理機能は、v-model 命令と @event 命令によって実装できることに注意してください。これらの命令により、フォーム送信機能を簡単かつ効率的に実装できます。同時に、mounted() フック関数を通じてサーバーからデータを取得し、そのデータをフォームにバックフィルすることもできるため、ユーザーはデータを簡単に編集できます。

以上がVueフォームの送信と編集を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。