初心者がVue.jsの公式ガイドを勉強するメモ フォーム入力編

フォーム入力バインディング

今回のお題です

https://jp.vuejs.org/v2/guide/forms.html

• ブラウザー結果は、掲載しませんので、実際に確認してみてください。

テキスト

• App.vue

<template lang="pug">
  #App
    //- テキスト
    p Message : {{ msg }}
    label Input :
      input(v-model="msg" placeholder="please message")

    div ------------------------------------------------

    //- 複数行
    div Multiline:
    p Message : {{ msgMultiline }}
    textarea(v-model="msgMultiline" placeholder="please message")

    div ------------------------------------------------

</template>

<script>

export default {
  name: 'app',
  data  () {
    return {
      msg: '',
      msgMultiline: ''
    }
  },
  computed: {
  },
  methods: {
  }
}

</script>

チェックボックス

• App.vue

<template lang="pug">
  #app
    div checked: {{ checked }}
    input(type="checkbox" id="checkbox" v-model="checked")

    div --------------------------------------------------

    div Array: {{ checkedNames }}
    input(type="checkbox" id="jack" value="jack" v-model="checkedNames")
    label(for="jack") Jack
    input(type="checkbox" id="john" value="john" v-model="checkedNames")
    label(for="john") John
    input(type="checkbox" id="mike" value="mike" v-model="checkedNames")
    label(for="mike") Mike

</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      checked: '',
      checkedNames: [],
    }
  },
  mounted () {
  }
}

</script>

• チェックボックスは、一個だけ設置とか無いでしょうから、配列で管理できるのはいいですね。

ラジオ / セレクト

• App.vue

<template lang="pug">
  #app
    input#one(type="radio" value="One" v-model="picked")
    label(for="one") One
    input#two(type="radio" value="Two" v-model="picked")
    label(for="two") Two
    input#three(type="radio" value="Three" v-model="picked")
    label(for="three") Three
    div Select : {{ picked }}

    div ------------------------------------------------

    select(v-model="selected")
      option(disabled value="") Please select
      option A
      option B
      option C
    div Selected : {{ selected }}

    div ------------------------------------------------

    select(v-model="selectedM" multiple)
      option(disabled value="") Please select
      option A
      option B
      option C
    div Selected : {{ selectedM }}

    div ------------------------------------------------

    select(v-model="selectedB")
      option(v-for="option in options" :value="option.value")
        span {{ option.text }}
    div Selected : {{ selectedB }}

</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      picked: '',
      selected: '',
      selectedM: [],
      selectedB: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  },
  mounted () {
  }
}

</script>

• optionの数にもよるでしょうが、　dataに持っていくのがスマートですね。

値のバインディング

• index.html

<template lang="pug">
  #app
    input(
    type="checkbox"
    v-model="toggle"
    true-value="yes"
    false-value="no"
    )
    //- true/false -> yes/no に変換
    div Yes / No : {{ toggle }}

    div -----------------------

     //- radio 
     //- a -> shizuka
     //- b -> tomitarou
    input(
      name="qqq"
      type="radio"
      v-model="pick"
      v-bind:value="a"
    )
    input(
      name="qqq"
      type="radio"
      v-model="pick"
      v-bind:value="b"
    )
    div {{ pick }}
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      toggle: '',
      pick: '',
      a: 'shizuka',
      b: 'tomitarou'
    }
  },
  mounted () {
  }
}

</script>

• デフォルトの値をバインディングして、変更出来ますね。

修飾子

• App.vue

<template lang="pug">
  #app
    div Nomal: {{ msg }}
    input(v-model="msg")

    div ----------------------------------

    div Lazy: {{ msgLazy }}
    input(v-model.lazy="msgLazy")

    div ----------------------------------

    div Number+1: {{ age + 1 }}
    input(v-model.number="age" type="number")
    //- input(v-model="age" type="number")

    div ----------------------------------

    div Trim: {{ msgTrim }}
    div Trim+Trim: {{ msgTrim }}{{ msgTrim }}
    div Nomal + Nomal: {{ msg }}{{ msg }}
    input(v-model.trim="msgTrim")

</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'normal ',
      msgLazy: 'lazy',
      age: '',
      msgTrim: 'apple',
    }
  },
}

</script>

• JSは、型に寛大(ルーズ？)なので、数字の扱いには注意ですね。
• type="number" は入力規制のみです。
• lazyは、enterが押された時がchange eventみたいですね。
• trim は余分なスペースの除去ですね。

コンポーネントの v-model

• またカスタムコンポーネントを学習した時ですね。

• 今回は、これで終了です。

• フォーム入力は、少し慣れないと難しい印象です。

• 意図したとおりの動作ができるようになりたいですね。