v-forディレクティブを使うと、データに納められた複数の項目がページに要素として差し込めます。このときv-forにkeyを与えるのが、「スタイルガイド」に定められた「必須」のルールです(「キー付き v-for」)。 一意のkey特別属性とインデックス key特別属性は、要素に一意の値を与えます。:keyはv-bind:keyの省略構文です(「key」参照)。
Vue.js: v-forで項目インデックスをkey属性にしていいのか - Qiita
v-forディレクティブを使うと、データに納められた複数の項目がページに要素として差し込めます。このときv-forにkeyを与えるのが、「スタイルガイド」に定められた「必須」のルールです(「キー付き v-for」)。 一意のkey特別属性とインデックス key特別属性は、要素に一意の値を与えます。:keyはv-bind:keyの省略構文です(「key」参照)。
【Vue.js】ページの更新時などに離脱防止アラートを出す
ユーザデータの登録・編集ページ等、入力ページの更新時や意図しないページ遷移時に「入力内容が破棄されます」等のアラートを出したい。WindowEventHandlers.onbeforeunloadを使います。
Vuetifyのv-dialogのスクロール位置がリセットされない件に対応してみた - Qiita
利用規約などスクロールが必要なコンテンツをv-dialogに書くと、スクロール位置がリセットされない件に対応してみました(Vuetify v1.5対応) まずはこちらに対応したv-dialogを用意 https://scrapbox.io/gyarasu/Vuetify%E3%81%AEv-dialog%E5%86%85%E3%81%A7%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E4%BD%8D%E7%BD%AE%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B dialogコンポーネントが開いた後に実行するメソッドなどに下記の方法でscrollTopを指定すればスクロール位置がリセットされます。 let i = document.getElementById('scroll-target') i.a
Vue.jsの「el」とは？ - JavaScript勉強会
Vue.jsの学習メモ。 jsstudy.hatenablog.com Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう？と思いました。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ↑この「el: '#app'」という部分ですね。 本ではサラッと説明されていて、いまいちピンと来なかったので、他の説明を調べてみました。 マウントする要素 まずは本書の説明です。 (p.43) オプションには使用するデータやメソッドを定義していきます。 var app = new Vue({ // （コンポーネントの）オプションをここに書く }) 基本的なオプションの構成 // 基本的なオプション構成（使用するデータやメソッド） var app = new Vue({
Vue.js の props の type 指定時に String と Number の両方を許容させる - Qiita
<script> ・・・ props: { // 複数の型の許容 propB: [String, Number] } ・・・ </script> 既存実装などでそもそも渡される型の指定がないけれど、どうも数値とみなされる値が渡されてるっぽい・・・というときに・・・ type に直接 String や Number を渡すのではなく、配列に格納すると どうも指定した型が許容されるようです。 <template lang="pug"> span {{ puroppu }} </template> <script> import Vue from 'vue'; export default Vue.extend({ props: { puroppu: { // 文字列、数字両方 type: [String, Number], // 数字のみ `type: Number` と同義 //type:
Vue.jsで「すべて選択」を実装する - Qiita
checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。 しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。 ここではそんな時にあると便利な「すべて選択」を実装してみます。 実装デモ See the Pen Select All Checkbox by Vue.js - flow4 by Shoko Oyamada (@chcltn) on CodePen. 「すべて選択」の実装の流れ dataとv-forでリストを用意 すべて選択が押されたかのフラグを用意 すべて選択が押された時の動きを作成 個々のcheckboxをクリックした時の動きを作成 1.dataとv-forでリストを用意 dataにて、猫の名前を配列catsに入れておきます。 それを利用し、v-forでリストを作成します。 See the Pen Select
【Vue.js】ナビゲーションガード(beforeRouteEnter)を使って前のページのURLを取得する - Qiita
やりたいこと VueRouterで遷移するページで、一つ前のページのURLなどを取得して、 それに応じてページ内のパーツの表示非表示を切り替えたい。 beforeRouteEnterで取得しようとしたが・・・ 今回はあるComponentのみで、前のURLが必要だったので、VueRouterのナビゲーションガードのbeforeRouteEnterを使用してみました。 公式のドキュメント <template> <div> // 前のURLに応じてここの表示非表示を切り替えたい <div v-if="prevRoute.name =='hoge'"></div> </div> </template> <script> export default { data() { return { prevRoute: null, }; }, created() { }, beforeRouteEnter
Vuetify のパンくずコンポーネントを Nuxt.js に対応させるには？｜ProgLearn｜エンジニアのためのプログラミング情報メディア
こんな感じの綺麗なパンくずリストが作成できちゃいます！ とても便利なのですが、一つ問題点が。 デフォルトの設定のままではリンクが a タグのままであり、Nuxt.jsを使っている時の nuxt-link が適用されません。 なので、Nuxt.jsを使っている恩恵に預かれません。 その時は、 Slotを用いてちょこっと設定をしてあげる必要があります。 今回はその書き方をご紹介します！ サンプルデータ <template> <v-breadcrumbs :items="itemsData"> <template v-slot:item="props"> <v-breadcrumbs-item exact :disabled="props.item.disabled" :to="props.item.href" nuxt > {{ props.item.text }} </v-breadcrum
[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのか - Qiita
[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのかJavaScriptVue.js
![[Vue.js] なぜpropsのdefault値にObjectやArrayを指定する際にfactory関数にする必要があるのか - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/32431c07577d197a69fd3d401a87d04d8dc94e40/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVnVlLmpzJTVEJTIwJUUzJTgxJUFBJUUzJTgxJTlDcHJvcHMlRTMlODElQUVkZWZhdWx0JUU1JTgwJUE0JUUzJTgxJUFCT2JqZWN0JUUzJTgyJTg0QXJyYXklRTMlODIlOTIlRTYlOEMlODclRTUlQUUlOUElRTMlODElOTklRTMlODIlOEIlRTklOUElOUIlRTMlODElQUJmYWN0b3J5JUU5JTk2JUEyJUU2JTk1JUIwJUUzJTgxJUFCJUUzJTgxJTk5JUUzJTgyJThCJUU1JUJGJTg1JUU4JUE2JTgxJUUzJTgxJThDJUUzJTgxJTgyJUUzJTgyJThCJUUzJTgxJUFFJUUzJTgxJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iNDY3OTkxNzllYjE3NDA4MWY1YzE5N2VkZmEzZGI2ZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob2dlc3VrZV8xJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YTc0ZjRiNGY5NmJiMTI4YTc4OTRkZWE4OGY5NTE0Ng%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D613bf7a2b1ba831a01944df350050897)
Vuejsのちょっと便利なコンポーネント機能 - Qiita
はじめに vuejsはとっつきやすく完成度の高いJSフレームワークだと思っていますし、日本語のドキュメントも充実しています、実際に下記の機能も全て公式ドキュメントに記載されている内容です。 しかしながら、実際にやりたいことと機能名の間に乖離があったりして、いざ使用する時に意外に実装方法などを見つけにくい場合も当然ながら存在するため、自分用に Vuejs のちょっと便利なコンポーネントの機能をメモっておきます。 お品書き 共通した親要素を使いまわしたい（スロット配信） パラメーターによって使用するコンポーネントを変えたい（動的コンポーネント） 複数のコンポーネントで、同じ処理を使いまわしたい（ミックスイン） 出力するタグを動的に指定したい 共通した親要素を使いまわしたい いわゆるラッパーコンポーネント、例えば10個のコンポーネントを作る必要があるとして、その全てが共通したヘッダやフッタを持っ
連動するプルダウンリストをVue.jsを使って実装する ( with PHP ) - Qiita
みなさんこんにちは プルダウンリストAを選択すると、プルダウンリストBが自動的に切り替わる... 例えば、部署を選んだら、その下の課が選択できるようになるみたいな、そんな連動するプルダウンリストを作りたくなったのです。 初めは、まあ、jQueryでいいかって思ったのですけど、コードがモコモコと増えていきまして、すごい汚い状態になったので、却下して、ふんわりとVue.jsで実装しようとしたのだけど、ググってもあまり出てこなかったので、とりあえずリファレンス見ながら実装してたら、普通に書けちゃったので、忘れないうちに記事にしちゃおうと。 あ、SPAの話じゃないっすよ、普通にMPAでの話っす。 あと、タグのPHPに不穏な空気を感じたりしないこと。 TL;DR MPAなので、データはグローバルにjsonでベタがき Vue.jsのデータバインディングの仕組みを使って、連動先のリストを切り替える 複数
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue Routerでparamsとqueryの取得方法 - Qiita
VueRouter末尾のスラッシュなしのデフォルトの子ルート
Loading...
How to trigger a mouse click in Vue.js – Renat Galyamov
[Vue] 任意のタグにフォーカスする際などに、$refsが最適すぎた件 - Qiita![[Vue] 任意のタグにフォーカスする際などに、$refsが最適すぎた件 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea3a8c5980c3778764f09037b4e1f35979d6f181/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCVnVlJTVEJTIwJUU0JUJCJUJCJUU2JTg0JThGJUUzJTgxJUFFJUUzJTgyJUJGJUUzJTgyJUIwJUUzJTgxJUFCJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgyJUFCJUUzJTgyJUI5JUUzJTgxJTk5JUUzJTgyJThCJUU5JTlBJTlCJUUzJTgxJUFBJUUzJTgxJUE5JUUzJTgxJUFCJUUzJTgwJTgxJTI0cmVmcyVFMyU4MSU4QyVFNiU5QyU4MCVFOSU4MSVBOSVFMyU4MSU5OSVFMyU4MSU4RSVFMyU4MSU5RiVFNCVCQiVCNiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODVlMmNlMjBjMjczZGJlOTdiOWY0NmY0YWEyMzZiNzk%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwcG9uX21hZWRhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00M2EzM2Q0MzkyMTQ1YjhhOTYyOTNhNTUyMTI1ZWU0Yw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D45659518dfcdbe601f97c10d6868ea1b)
vue.js — VueJs Propsに複数のデータ型を追加するにはどうすればよいですか？
Vue.jsでコンポーネントのテンプレート中で変数を宣言/代入したい
Vue.jsでdataを初期値に戻す - Qiita
Loading...