- 2020.12.22
【Vue.js】note風にtextボックスを増減させる
動き自体はかなりシンプルです。noteと動きは違いますがボタンを押下したら書き込めるテキストボックスを追加していきます。イメージはこんな感じです。 左側の＋で行の追加、ーでその行を削除します。 さっそくコードを確認しましょう。 結構短い行でできます。 簡単に説明すると、 ポイントは下記のindexです。 buttonが押下されると、indexを引数にしてtextListへ指定の場所(index)に […]
Vue.js
- 2020.12.15
【Vue.js】axiosで受け取ったjsonをChart.jsで表示する
前回書いたこの記事の続きとなります。 Vue.js フィルター機能実装 今回は簡単なチャートをChart.jsを使用して表示したいと思います。 前回作成したbook.htmlにリンクを張ってチャートを表示するページへ推移させようと思います。 私はこんな感じでリンクを張りました。bodyの中ならどこでもいいです。 ファイルがないとリンクがあっても飛べないので、book.htmlと同じ配下にchart […]
- 2020.12.07
Vue.js フィルター機能実装
前回書いたこの記事よりスクレイピングしたデータを使用して、Vue.jsで表示してフィルター機能を実装していきたいと思います。 Pythonを利用してVueで表示したい方はこれらの記事を参照してみて下さい。 イメージはこんな感じです。ランキング部分をVue.jsで表示しています。 表示しているデータはPythonでエクセルから読み込んでjsonに変換しているだけです。絞り込み機能のフォーム部分でそれ […]
- 2020.11.28
Vue.jsからPythonにリクエストを飛ばしてエクセル書き込み
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 エクセルに書き込むメソッドの作成 Vue側から飛ばすデータの内容は決まっているので(表示しているデータ)それを元にエクセルに書き込むメソッドを作成します。 main.pyと同じ配下にfunction.pyのファイルを作成します。下記書き込んでください。 足りないライブラリは各自pip installして下さい。 Vue側からリクエス […]
- 2020.11.12
PythonでVue.jsソート(昇順・降順)
この記事からの続きとなります。まだご覧になっていない方はどうぞ。 タイトルの通り昇順のソートを行います。 昇順 index.htmlを編集します。 まずは無駄なコードが多いためシンプルにします。 にアクセスして前回同様に表示されていればOKです。 次にソートメソッドを実装します。sort_key: ”の追加とcreatedの下にメソッドを実装します。 実装が終わったらテーブルの項目をク […]
- 2020.11.08
PythonでVue.jsを使う
この記事からの発展となります。まだご覧になっていない方は是非読んでみてください。 サンプルデータはscikit-learnから参考とさせていただきます。 まずは前回記事で作成したmain.pyを編集します。必要なライブラリをインポートしてメソッドを追記します。 今回はhead()縛りで5件のみの表示とします。index側はVue.jsを使用しますのでデータフレームから一行ずつ取り出してJSON形式 […]