Nuxt

NuxtでVuexを使う3

今回はinput要素の文字列を取得して、storeに格納するところを行います。格納する処理自体は前回までで実装済なので、inputの値をどのようにして渡すかという点がポイントになります。 input要素にv-modelをつけることで...
JavaScript

JavaScriptの

三項演算子 let score = 70 //三項演算子 let result = (score > 80) ? '合格' : '不合格' console.log(result) //不合格 ...
JavaScript

クリックイベントとthisとラムダ式

前回の記事でJavaScriptは発火場所によってthisのコンテキストが違うことがわかりました。 今回は、それを踏まえて自分がハマった箇所をご紹介します。 var price = 100 const tes...
JavaScript

JavaScriptのletとthis

let price = 100; console.log(this.price) const func = function(){ console.log(this.price) } ...
Nuxt

NuxtでVuexを使う2

前回の記事でStoreのmutationsにvueから直接commitしていましたが、公式のTodoアプリを見るとactionを定義して、そこを経由してcommitしていました。 なので、そのように作り変えます。 export...
Nuxt

NuxtでVuexを使用する

NuxtではVuexを簡単使えます。なんかクラシックモードは廃止予定らしいのでモジュールモードのストアを利用します。 今回はTodoリストでなく買い物リストを作ります。 まずは、storeフォルダにlist.jsを作りました。...
JavaScript

JS勉強記録-ランダム値

テンプレートリテラル const mes = `this is ${hensu} very god` console.log(mes) ​ "this is これは変数 very god" ランダム値を取得する co...
Laravel

Laravelで保存した配列をビューで表示する

前回の記事で配列のデータを格納しましたので、今回はそれをビューで表示します。ルートを追加しておきます Route::get('test','TestController@test'); TestControllerのtest...
Laravel

Laravelで配列を保存する

まずはマイグレーションファイルを作成する php artisan make:migration create_tests_table マイグレーションファイルはこんな感じにしました。 public functio...
Nuxt

Nuxtで画像を表示する

画像ファイルは、assets/img/yokohama.jpgにあるものとします。 <template> <div id="main-top"> <!--<img src="~asse...