🏠 ホーム
フロントエンド
PHP
Go言語
プログラミングの理解
プログラマーへの道
Google API

React と Vue の onChange & 投稿ボタン時 の違い

  プログラミング >     フロントエンド >  

Vue.js の場合: onChange と 投稿ボタン時 のデータ構造の違い

React では onChange のときに 配列形式のキー（['items', '0', 'section', 'tags']） を使い、
投稿ボタンを押すと文字列キー（"items.0.section.tags"） になる仕組みでした。

では、Vue.js ではどうなるのか？ React との違いも交えながら解説します！ 🔥

🎯 Vue.js の onChange 時のデータ構造

Vue.js では、v-model を使ってフォームの値をバインドするのが一般的です。
この場合、データは ネストされたオブジェクトの形式 で管理されます。

📌 例: ブログ記事のフォーム

<template>
  <div>
    <input v-model="blogPosts[0].category.tags" placeholder="タグを入力" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogPosts: [
        {
          category: {
            tags: 'Vue,JavaScript'
          }
        }
      ]
    };
  }
};
</script>

🛠 Vue の onChange 時のデータ

Vue では onChange のときに オブジェクトのネスト構造のままデータを管理 します。

{
  "blogPosts": [
    {
      "category": {
        "tags": "Vue,JavaScript"
      }
    }
  ]
}

🎯 Vue.js の 投稿ボタン時 のデータ構造

React と同じように、Vue でも API にデータを送信するときは、ネストされたオブジェクトをシリアライズ します。

📌 投稿ボタン を押したとき

<template>
  <button @click="submitForm">送信</button>
</template>

<script>
export default {
  data() {
    return {
      blogPosts: [
        {
          category: {
            tags: 'Vue,JavaScript'
          }
        }
      ]
    };
  },
  methods: {
    submitForm() {
      // APIに送信する際はJSONに変換
      console.log(JSON.stringify(this.blogPosts));
    }
  }
};
</script>

🛠 Vue の 投稿ボタン時 のデータ

{
  "blogPosts": [
    {
      "category": {
        "tags": "Vue,JavaScript"
      }
    }
  ]
}

🎯 React と Vue の onChange & 投稿ボタン時 の違い

フレームワーク onChange 時のデータ 投稿ボタン時 のデータ
React ['blogPosts', '0', 'category', 'tags'] { "blogPosts.0.category.tags": "Vue,JavaScript" }
Vue { blogPosts: [ { category: { tags: 'Vue,JavaScript' } } ] } { "blogPosts": [ { "category": { "tags": "Vue,JavaScript" } } ] }

💡 Vue.js ではどうやってバリデーションする？

Vue では バリデーションライブラリ VeeValidate や Yup を使う ことが多いですが、
React のように キーのフォーマットを変換する必要はあまりない です。

📌 Vue で tags のバリデーションをする例

<template>
  <div>
    <input v-model="blogPosts[0].category.tags" @blur="validateTags" />
    <p v-if="tagsError" style="color: red">{{ tagsError }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      blogPosts: [
        {
          category: {
            tags: ''
          }
        }
      ],
      tagsError: ''
    };
  },
  methods: {
    validateTags() {
      const tags = this.blogPosts[0].category.tags;
      if (!tags || tags.length < 1 || tags.length > 200) {
        this.tagsError = 'タグは1文字以上200文字以下で入力してください。';
      } else {
        this.tagsError = '';
      }
    }
  }
};
</script>

✔ Vue では v-model でバインドし、直接オブジェクトを操作する。
✔ バリデーション時に this.blogPosts[0].category.tags へ直接アクセス。
✔ React のように ['blogPosts', '0', 'category', 'tags'] のようなキー変換は不要！

🎯 Vue では onChange & 投稿ボタン時 にどんな違いがある？

1️⃣ onChange 時は v-model でオブジェクトのデータを直接更新
2️⃣ 投稿ボタン では JSON.stringify(this.blogPosts) でそのままデータを送信
3️⃣ React のように ドット表記のキー に変換する必要はない

🎯 まとめ

✅ React では onChange 時は ['items', '0', 'section', 'tags'] のような配列形式、
投稿ボタン時は "items.0.section.tags" のようなドット表記のキーに変換 することが多い。

✅ Vue では onChange のときも 投稿ボタン のときも、ネストされたオブジェクトのまま処理 するのが一般的。

✅ Vue の場合、バリデーションは this.blogPosts[0].category.tags のように直接参照 すればOK！

Vue.js は シンプルなデータ管理がしやすい ので、React のようにキー変換をする手間が少ないのがメリットですね！ 🚀🔥

登録日：

更新日：

by

コメント         tweetでコメント