[Vue.js] v-modelを使用したフォームの基本を簡潔に

フォーム系のタグは、v-modelディレクティブを利用してリアルタイムに管理ができる。

input type=“checkbox”は複数の場合は配列に格納する。入るのはvalueの値。

index.vue

<div id="app">
<input type="checkbox" name="" id="" v-model="Category" value="value-1" />
<input type="checkbox" name="" id="" v-model="Category" value="value-2" />
<input type="checkbox" name="" id="" v-model="Category" value="value-3" />
<p>{{Category}}</p>
</div>
<script src="app.js"></script>

app.js

Vue.createApp({
  data: function () {
    return {
      message: 'メッセージ',
      Category: [],
    };
  },
}).mount('#app');

表示