Vueでコントロールとデータのバインド

画面の入力用コントロールにvueが提供するv-model属性で、dataの中身を指定する。

例ではuserinfo.idがコントロールとバインドされる。

バインドすると、画面が変わればuserinfo.idの中身が変わるし、userinfo.idを書き換えれば画面の値が変わる。

<!-- blade.phpに記載しているのでtemplateタグ -->
<template>
  <input
    type="text"
    id="id"
    class="form-control"
    v-model="userinfo.id"
  />
</template>

<script>
export default {
  data: function () {
    return {
      userinfo: { id:'1'},
    };
  },
}
</script>