【Nuxt.js】Nuxt文法編：v-model①

前置き

文法シリーズ🌟

文法記事では毎度のことですが
文法は覚えて良いものです📚🙋‍♀️
しっかりマスターしていきましょう♪

どんな時に使うの？

form内のinputなど入力要素に使います🌟
【Nuxt.js】v-model実践編：オリジナルフォームの簡単な作り方

v-model

v-modelとは

双方向バインディングをしてくれるもの！

双方向バインディングって何だ！？
という方、簡単に言えば
スクリプトとブラウザどちらからでも
値を更新できて便利〜なものです💡

v-modelを使わなくてもできるのですが
これだけでできる便利な書き方を
糖衣構文(syntax sugar)と言います。

この2行は全く同じ意味です。

<input v-model="inputText">
<input
  :value="inputText"
  @input="$emit('input', $event.target.value)"
>

<input

:value="inputText"

@input="$emit('input', $event.target.value)"

:valueはv-bind:valueです。
v-bindの記事は近々出します🌟

@inputはこちらで解説済みです。
代表的な@clickをメインに解説していますが
使い方などはほとんど同じです！
Nuxt文法編：@click

v-modelを使わない場合

JavaScriptのonchangeの使い方を現役エンジニアが解説【初心者向け】
はじめてのVue.js（双方向バインディング）
こんな感じで作り込みが必要です！
単純にコードが長くなりますね。

使用タグ、使用可能な修飾子

v-modelといえば
inputでよく使うイメージですね！
もちろん他の入力要素にも使えます🌟
そしてコンポーネントにも！

使用タグ

<input>
<select>
<textarea>
コンポーネント

コンポーネントは親子間で使う場合なので
v-model②の記事で続きをやります💡

修飾子

.lazy - input の代わりに change イベントを購読します
.number - 有効な input の文字列を数値にキャストします
.trim - input をトリムします

テキスト入力での使用

1行

messageプロパティの値が
inputからも@clickのmethodsからも
変更できるようになっています🌟

コード

) pages

<template>
 <div class="page">
   <p>{{ message }}</p>
   <input
     v-model="message"
     type="text"
   >
   <button
     @click="change"
   >
     change!
   </button>
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: 'Hello Nuxt.js!'
   }
 },
 methods: {
   change () {
     this.message = 'スクリプトから変更'
   }
 },
}
</script>

<p>{{ message }}</p>

<input

v-model="message"

type="text"

<button

@click="change"

change!

</button>

</div>

</template>

export default {

data () {

return {

message: 'Hello Nuxt.js!'

}

methods: {

change () {

this.message = 'スクリプトから変更'

}

</script>

複数行

複数行なのでtextareaタグを使用。
pタグにスタイルを当てることで
複数行のテキストを扱うことができます！

コード

) pages

<template>
  <div class="page">
    <textarea
      v-model="message"
      placeholder="複数行の入力"
    />
    <p>↓送信される文字</p>
    <p style="white-space: pre-line;">{{ message }}</p>
    <button
      @click="submit(message)"
    >
      送信
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'メッセージ',
    }
  },
  methods: {
    submit (message) {
      console.log(message)
    },
  },
}
</script>

<textarea

v-model="message"

placeholder="複数行の入力"

<p>↓送信される文字</p>

<p style="white-space: pre-line;">{{ message }}</p>

<button

@click="submit(message)"

送信

</button>

</div>

</template>

export default {

data () {

return {

message: 'メッセージ',

}

methods: {

submit (message) {

console.log(message)

}

</script>

チェックボックスでの使用

単体

boolean値を出力しています

コード

) pages

label, inpuの書き方

<label><input type="checkbox"></label>

または

<label for="name"></label>
<input type="checkbox" id="name">

<template>
  <div class="page">
    <label>
      <span>
        {{ checked }}
      </span>
      <input
        v-model="checked"
        type="checkbox"
      >
    </label>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: false,
    }
  },
}
</script>

<label>

<span>

</span>

<input

v-model="checked"

type="checkbox"

</label>

</div>

</template>

export default {

data () {

return {

checked: false,

}

</script>

複数

valueを追加し
dataを配列にし出力

コード

) pages

<template>
  <div class="page">
    <label>
      <span>
        apple
      </span>
      <input
        v-model="checked"
        type="checkbox"
        value="apple"
      >
    </label>
    <label>
      <span>
        melon
      </span>
      <input
        v-model="checked"
        type="checkbox"
        value="melon"
      >
    </label>
    <p>{{ checked }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: [],
    }
  },
}
</script>

<label>

<span>

apple

</span>

<input

v-model="checked"

type="checkbox"

value="apple"

</label>

<label>

<span>

melon

</span>

<input

v-model="checked"

type="checkbox"

value="melon"

</label>

<p>{{ checked }}</p>

</div>

</template>

export default {

data () {

return {

checked: [],

}

</script>

ラジオボタンでの使用

基本的な使い方

コード

) pages

<template>
  <div class="page">
    <label>
      <span>
        one
      </span>
      <input
        v-model="picked"
        type="radio"
        value="one"
      >
    </label>
    <label>
      <span>
        two
      </span>
      <input
        v-model="picked"
        type="radio"
        value="two"
      >
    </label>
    <p>Picked: {{ picked }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // またはpicked: [],
      picked: '',
    }
  },
}
</script>

<label>

<span>

one

</span>

<input

v-model="picked"

type="radio"

value="one"

</label>

<label>

<span>

two

</span>

<input

v-model="picked"

type="radio"

value="two"

</label>

<p>Picked: {{ picked }}</p>

</div>

</template>

export default {

data () {

return {

// またはpicked: [],

picked: '',

}

</script>

プルダウンでの使用

セレクトボックスともいいますね！

v-forなしver.

コード

) pages

disabled属性

初期値が空の場合(selected: '')
iOSだと1番上の選択肢が押せなくなります。
それを防止するために1番上にdisabeled属性を使用した
ダミー選択肢を置くことがおすすめ🌟

<template>
  <div class="page">
    <select v-model="selected">
      <option disabled>Please select one</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: '',
    }
  },
}
</script>

<option disabled>Please select one</option>

</select>

<p>Selected: {{ selected }}</p>

</div>

</template>

export default {

data () {

return {

selected: '',

}

</script>

v-forありver.

コード

) pages

v-forについては
文法編：v-forをご覧ください👀

<template>
  <div class="page">
    <select v-model="selected">
      <option value="" disabled>Please select one</option>
      <option
        v-for="option in options"
        :value="option.value"
        :key="option"
      >
        {{ option.text }}
      </option>
    </select>
    <p>Selected: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selected: '',
      options: [
        { text: 'A', value: 'A' },
        { text: 'B', value: 'B' },
        { text: 'C', value: 'C' }
      ],
    }
  },
}
</script>

<option value="" disabled>Please select one</option>

<option

v-for="option in options"

:value="option.value"

:key="option"

</option>

</select>

<p>Selected: {{ selected }}</p>

</div>

</template>

export default {

data () {

return {

selected: '',

options: [

{ text: 'A', value: 'A' },

{ text: 'B', value: 'B' },

{ text: 'C', value: 'C' }

}

</script>

まとめ

v-modelはv-onとv-bindをまとめて1行で書くためのシュガーシンタックス
テキスト入力の場合は@input :value
チェックボックス、ラジオボタンの場合は@change :checked
プルダウンの場合は@change :value