【Vue.js】複数のチェックボックスから動的に値を取得する方法 | すくまりのメモ帳
はじめに この記事では、単一のチェックボックスでオン/オフ（true/false）を表す場合と、複数のチェックボックスから値を取得できるコードを紹介します。 動作環境 Vue.js 2.6 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Practice</title> </head> <body> <div id="app"> <form> <label for="agree">規約に同意する</label> <input type="checkbox
【Vue.js】ページの更新時などに離脱防止アラートを出す
ユーザデータの登録・編集ページ等、入力ページの更新時や意図しないページ遷移時に「入力内容が破棄されます」等のアラートを出したい。WindowEventHandlers.onbeforeunloadを使います。
Vuetifyでラジオボタン（v-radio）を横並びにする方法 - Qiita
Vuetifyのラジオボタン(v-radio)を横並びにしたい。 →propsに row を指定すればOK まず、普通に書くと以下の画像のように縦並びになります <v-radio-group> <v-radio label="はい" value="radio-1"></v-radio> <v-radio label="どちらでもない" value="radio-2"></v-radio> <v-radio label="いいえ" value="radio-3"></v-radio> </v-radio-group> ↓ どうにかこれを横並びにしたかったのですが、 「Vuetify ラジオボタン 横」などのバカっぽい検索を繰り返してもなかなか情報が出てきませんでした。 Vuetifyを使わない素のラジオボタンなら、「インライン要素にせよ」などの情報が出てきますが いろいろ試すも一生縦のまま。
フォーム入力バインディング — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
Vue.jsで作る フォーム確認画面 - Qiita
はじめに アカウント登録などで、ユーザに情報を入力してもらったあとに、入力内容を確認してもらうための画面を用意しているサービスって多いですよね SPAでそれを実現しようとすると、確認画面にデータを渡したりとか、戻ったときに入力内容が消えちゃったりして、頭を抱えました。 結果、こんな風に実装したよ〜、というのをご紹介できればと思います。 環境 Vue.js 2.6.10 vue-cli 3.9.1 vue-router 3.0.3 動作 動作確認用として、Githubにコード全文を上げています https://github.com/tsk-wakabayashi/routing-nest-sample Gifでみるとこんな感じ 解説 基本的にはこちらの機能を使います https://router.vuejs.org/ja/guide/essentials/nested-routes.html
Vue.js｜Formで送信させない(@submit.prevent) - わくわくBank
preventイベント修飾子の動作確認をします。@submit.prevent を利用すると、Formの送信前にバリデーション処理を入れるなどの活用ができます。 「@submit.prevent」 について <form @submit.prevent action="/" method="POST"> <button type="submit">送信</button> </form> @submit.prevent を利用すると preventDefaultメソッド が実行されて、ブラウザ本来の挙動(formによる送信)が停止されます。 preventDefaultメソッドについて こちら で取り上げています。 動作確認 下記パターンで動作確認してみます。 ボタン1 @submit="onSubmit1" なので送信されます。 ボタン2 @submit.prevent="onSubmit1
v-text-fieldとDatePickerを組み合わせる - こーひーエンジニアブログ
v-menuを使ってv-text-fieldとDatePickerを組み合わせる <v-menu v-model="menu" max-width="290px" min-width="290px"> <!-- ポップアップを追加する要素にv-on="on" --> <template v-slot:activator="{ on }"> <v-text-field slot="activator" v-model="fromDate" label="fromDate" readonly v-on="on" /> </template> <!-- ポップアップされる内容--> <v-date-picker v-model="fromDate" /> </v-menu> こんな感じに実装することが出来ました。 v-text-fieldはreadOnlyでv-date-pickerと同じv-m
Vuejs formをサブミットするときのポイント
SPAの場合はformタグに任せてデータをサブミットすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行うことが多い。 課題以下のように<button type="submit" @click="exec">を使ってボタン押下時のハンドラを実行するのは危ない。 <template> <form> <input type="text" placeholder="username" /> <input type="text" placeholder="password" /> <button type="submit" @click="exec">submit</button> </form> </template> <script> export default { name: 'HelloWorld', methods: { exec: function () { //
Vue.jsでシンプルな入力文字種制限 - Qiita
要件そのものにどうも納得がいかなかいが世の中似たような事求められることもありそうだからメモ。 要件 フロントエンドでリアルタイムに入力項目にバリデートをかけたい 条件外の入力文字列はそもそも入力できないようにしたい フレームワークはVue.js 検討 とりあえずはpatternが使えそう (2)が無ければinputのpatternに正規表現を入れてイチイチformタグで囲って入力毎にsubmitしてやれば大体イケそうだが vue-validator使えば多分イケるだろうけどこの程度のことに導入したくない 現時点での結論: <template> <main id="app"><main id="app"> <h1>Vueでシンプルな入力制限</h1> <table> <tbody> <tr> <th>数字のみ:</th><td><input type="text" pattern="^[0-
Vue.js コンポーネントで初期フォーカスを設定する
Vue.jsで初期フォーカスを設定する方法を紹介します。例えばモーダル画面が表示された時、モーダルのコンポーネントの中のテキストボックスにフォーカスを当てたい場合などがあります。ref属性を指定すると、JavaScriptのgetElementByIdで取得したときのように、elementとしてコントロールにアクセスできるようになります。createdのイベントだとまだ要素にアクセスできない状態なので、初期フォーカスをしたい場合はmountedのイベントで行う必要があります。
Vue.js入門その７〜セレクトボックスを動的に変更してみる〜 | RE:ENGINES
はじめに こんにちは、naoki85です。 今回はよくあるパターンですが、1つめのセレクトボックスを選択したら、次のセレクトボックスの項目を変えてみます。 サンプル 実際のサンプルはこちらです。 良い例が思いつかなかったので、このブログのカテゴリとタグを例にしてみました（笑） とりあえず作ってみる まずはソースコードを載せ、その後、説明を入れたいと思います。 ソースコード <div id="app"> <!-- Categories --> <label for="category">Category</label> <select name="category" v-model="selectedCategory" v-on:change="fetchTags"> <option v-for="category in categories" v-bind:value="category.
v-modelに初期値をインラインから設定する - Qiita
はじめに form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングさせるためには、 v-model を使用します😇 しかし、 Vue.js のドキュメントに以下のようなことが書いてあります。 v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。 つまり、 v-model は入力の初期状態を無視するため、フォーム要素でチェックまたは選択した値を設定することはできません😿 常に Vue インスタンスデータが扱われるので、 初期値を設定するた
Vue.JSでフォームのvalidationを行う - Qiita
vue.jsでvalidation付きフォームを作った。 基本機能 ・フォームが正しく入力されているかリアルタイムで出る ・送信ボタンを押した時、全フォームが正しく入力されているか判定して処理を分ける ようにしている。 今はフォームが空か否かで判定しているが、評価項目（文字数制限など）は比較的簡単に追加できる。 実装方法 validationを行うにはvue-validatorというライブラリを使うことも可能だが、簡単なvalidationだけではわざわざ使うほどでもない。 公式にあるfirebase+vuejsでのexampleを参考に実装した。 今回のソースコード:github validationを作る 今回は * title * description * date * location からなるフォームを作る。 入力された情報はnewEventに保持する。 それぞれの項目に対し、
Vuejs formをサブミットするときのポイント
SPAの場合はformタグに任せてデータをサブミットすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行うことが多い。 課題 以下のように<button type="submit" @click="exec">を使ってボタン押下時のハンドラを実行するのは危ない。 <template> <form> <input type="text" placeholder="username" /> <input type="text" placeholder="password" /> <button type="submit" @click="exec">submit</button> </form> </template> <script> export default { name: 'HelloWorld', methods: { exec: function () { /
Vue.jsでフォームを使おう - Qiita
Index 1.VueCLIでHelloWorld 2.Vue.jsでフォームを使おう 3.Vue.jsで単一ファイルコンポーネント 4.Vue.jsでAPI通信 5.Vue.jsで猫検索アプリ作成 6.おまけ 1.前提条件 Vue-CLIのインストールを終わらせておく事 サンプルコード 2.フォームを作成 Scene1.vueを編集していきます。 まずは一番単純なテキストボックスとデータバインディングを試してみましょう。 テキストボックスに文字を入力するとそのまま上部に文字が表示されます。 これが有名な「バインディング」という機能です。 STARTボタンを押すとScene2がレンダリングされるようになっています。 <template> <div class="scene1"> <p class="name">NICKNAME: {{ nickname }}</p> <input clas
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Vue] Radio ボタンの初期値にチェックを入れる方法（サンプルあり） - Qiita
Vueでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。（Vue.js始めるおれおれアドベントカレンダー2016 – 11日目） | Ginpen.com