10bace LOG

ターニングポイントさん!?

10bace LOG

タグ: vue

【Vue】TypeScriptの連想配列がバインドされぬわ

◆結論

Vue.set使いなはれ。

Vue:オブジェクトの変更検出の注意

◆経緯

TypeScriptで連想配列をIndex Signaturesで作るじゃん?んで、その中身書き換えんじゃん?

変更が反映されないんすよ。

  private hoge = {} as {[key: number]: string};
  private created(){
    this.hoge[0] = 'ちんちん';
  }
  private piyo(){
    this.hoge[0] = 'もがもが';
  }

piyoを呼んでも内容が書き変わらない。ぴぎゃあ!

続きを読む

【Vuetify】v-switchとかv-checkboxのchangeをcancelする

イヤー詰まった。

◆結論

当然ながらTypeScriptだよ。なんでJavaScriptなんて使ってるわけ?いい大人がさぁ。聡ずかしくないのかよ。

<v-switch
  :input-value="hoge"
  @click="piyo"
  @change="fuga"
 />
  private hoge = false;
  private piyo(e: MouseEvent) {
    if (!window.confirm('お前はそれでいいのか?')) e.preventDefault();
  }
  private fuga(){
    // 適当な処理
  }

答えが分かれば簡単だった。

◆理解のキモ

続きを読む

コイツは何時になったらVue.jsの導入記事を書くのか

いや書きてぇわ俺も。フロントエンドエンジニア達は不安よな。とは思えどもタイミングがちょっと違う気がする。

◆理由

導入簡単すよ。公開も簡単すよ。APIサーバー立ち上げんのも簡単す。でもね?Vue.jsの3.0が来るんすよね。

その時にお前ら「あのブタ畜生、3.0来るってわかってんのに2.6の導入方法教えやがったな。よし。決めた。殺そう。」

こうくるでしょう。俺はそんな理由で死にたくない。

だから教えようにもなかなか。

続きを読む

IE11でPromiseのunhandled regectionをハンドる

IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。

で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。

だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。

参考:Window: unhandledrejection イベント

で、IE11で動かなかった。ビルゲイツ殺す。

続きを読む

Vue.jsとナマのswiperを使ってaxiosで取得したデータを表示したい時のあるある早く言いたい

◆ひとりごと

Swiperじゃなくてtiny-slider使った方が良いような気がする。

◆要件

続きを読む

Vue.jsでimgの:srcにaxiosのresponse.dataをbindしてerrorをcatchした時は違う画像みせたかった人の逸話

◆修正しました

◆2019/6/23

修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。2パターン紹介しているから、好きな方を使え。

Vue 3.0が来たらフラグメント使え。

◆したいこと

  • APIで画像を表示する。(SVGじゃないやつ)
  • APIで画像が取得できなかった時は、指定の画像を表示する。(SVGでもなんでも)
  • APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。

◆おことわり

以下の成分を含みます。

これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。

続きを読む

【CSS】button押したときに限りfocusしつつoutline出さない

やーホント詰まった。「なんでできねぇんだよ」が久々に来たね。

英語圏兄貴の検索に引っかかることを願って、英単語まじえて説明していく。

◆したいこと

  1. htmlでbutton要素をclickする。
  2. focusは当てたい。けど見せたくない。つまるところ、outlineをhiddenしたい。outlineをinvisibleしたい。outline: none;したい。
  3. しかしながらtabで移動してきたときはfocusを当てたい。

◆前提知識:CSSの疑似クラス

条件によりCSSをあてたい時に使用。

MDN:疑似クラス

続きを読む

Vue CLIのserveをVS CodeからChromeでF5デバッグ

聖夜なので記事を捧げます。この狂った世界(Webフロントエンド)へ。
この記事がいつか、世界の片隅に打ち捨てられた震えるチワワフロントエンドエンジニアチワワを救うと信じています。

◆結論

続きを読む

TS18003 tsconfig.json で入力が見つかりませんでした

Visual StudioでType Scriptのプロジェクト作って遊ぼうと思ってたんだけど

tsconfig.json で入力が見つかりませんでした。指定された ‘include’ パスは ‘[“**/*”]’ で、’exclude’ パスは ‘[“node_modules”]’ でした。

とか言われた。

結論から言うと俺には解決できず、解決しなくていいエラー(意味不明)だと思う。気付いたら消えてた。

①ググり方

なんか技術者っぽい感じに華麗にググれたから、回答に行きついた手順を書いておく。なんかに役立てればいいよ。要らない人は飛ばせ。

続きを読む

Powered by WordPress & Theme by Anders Norén