VueJS

Vuexをわかりやすく知りたい

Vuexとは

Vue.jsの状態管理のライブラリ。データフローが単方向になるように設計されている。

単方向データフローのメリット
・データを取得しつつ更新するような複雑な処理ができないので、実装やデバッグが単純になる。
・理解が容易なコードを書きやすい。

ストア

アプリケーションの状態を保持する。vuexの根幹となる部分。アプリケーション内に常に一つのストアのみが存在する。

//ストアの

もっとみる
あなたのスキでパワーチャージ
4

【Laravel 7.x / Vue 4.x】LaravelでVue Selectを使ってaxios.postで送信する。

内容はタイトルの通りで、方法としては2つあります。

①Vue jsのdataの中にoptionを作って選択肢をあらかじめ決めておいてプルダウンメニューに表示する方法

②選択肢が増えたりするのでデータベースから選択肢を持ってくるやり方

LaravelでVue.jsのインストールやv-selectのインストール方法は他の方がたくさんしているので、そこの説明は省きます。

まずは①から解説していき

もっとみる

【Laravel 7.x / Vue.js】Warning: Use of undefined constant works – assumed ‘’ って出た時

var app = new Vue({ el: '#app', data() { return { customer_id: '{{ $report->customer_id }}', user_id: '<?php echo Auth::user()->id ?>', result: '{{ $report->res

もっとみる

個人開発でラブライブ専用掲示板を作った話

初めまして。

今回は私が作ったラブライブの掲示板についてお話したいと思います。

経緯

もうこの掲示板をリリースして一年以上経っているのですが、最近スレッドページのOGP対応などを行ったので、記憶を掘り起こしながら経緯や使用技術について書きたいと思います。(Qiitaで書かないのはメモとかポエム?よりな内容になると思ったからです💦)

去年の1月頃でしょうか、業務で好きなJavaScript

もっとみる

Vue.js基礎まとめ1(自分用)

Mustache構文(マスタッシュ構文)

new Vue({ el: '#app', data: { message: 'my note' }});

el:Vue.jsを適用する要素の指定
 「id="app"」を指定した要素内をVue.jsが有効となる
data:データオブジェクト
 HTML側から参照しバインディングする。下記のような形「{{…}}(Mustache構文)」で変

もっとみる

Nuxt.jsでh1(ページタイトル)をlayoutsレンダリングする方法

エンジニア向けの記事です。Nuxt.jsでヘッダーやらに入れる文字をページごとに変えたいけど、記述はlayoutsに纏めたいという方向けの記事です。

できること

記事タイトルやら、記事のサムネイルやらをlayoutsで表示することができます

前提

・単一ファイルコンポーネント使ってる
・ブログの記事タイトルとかパンクズとかをlayoutsでレンダリングする
・vuex利用

結論

pag

もっとみる

Nuxt.jsでAMP HTMLをgenerateする方法

エンジニア向けの記事です。それも、Nuxt.jsでgenerate(出力)するファイルをAMPにしたい!というエンジニア向けです。

前提

・特にamp用のmodulesとかは使いません。色んなところに落ちてるコードを引っ張って作った感じです。
・単一ファイルコンポーネントで作ってます。なのでCSSは「ページ用スタイル」「共通スタイル」みたいな感じで分かれてます。
・SCSS使ってます。共通スタ

もっとみる

ハンバーガー作りの続き。右端からスライドインするアニメーションの後、右に余白が増えちゃうにゃ。

動かなかったのはjsファイル指定のダブルクォート閉じ忘れだった。
ダウンロードしたサンプルは動いたけどなんで自分で書いて既存のページに埋め込んだのは動かないのか差分をちまちま調べてなかなか時間かかってしまった。
html文法検査してくれる高級なエディタを使うべきか。本にはVisual Studio Codeが良いとか書いてある。はじめて聞いたそれ。

それで一応メニューを開いたり閉じたり動いたけど

もっとみる

図書館で借りたこの本にあるvue.jsを使ったハンバーガーメニューのサンプルをほぼそのまま書いたつもりだけど動かにゃい。vue.jsが動いてにゃい感じがする。vue.jsデバッグの仕方はこの本には書いてにゃい。写真を撮って気が付いたけどサンプルダウンロードできるらしいにゃ(@@)

【Vue.js(Nuxt.js) Tips】
v-if="hoge.length > 1" での
"TypeError: Cannot read property 'length' of undefined" は
v-if="hoge && hoge.length > 1"でOK

ありがとー!お礼にあなたの運のよさを一時的に2倍にしました!
1