2019-09-13

Vue.js で、フォームの初期値を html側で設定する

javascript vue.js

f:id:matsuoshi:20190913113449p:plain

インターンの子が困ってたので、一緒にしらべたやつのメモ

Vue.js でフォームを扱う
入力フィールド (input や textarea) の初期値は、Vue.js 側ではなく、html にあらかじめ埋め込んだ値を設定したい (この場合は laravel の blade で入れたかった)

でまあ、インターンの方はいろいろ試してて

props を使う？
created? mounted? あたりで DOMを読み取る？
v-model? v-bind?

最終的に、こんな感じでうまくいきました

<div id="app">
  <textarea id="defaultField" v-model="foo">ここに初期値が入る</textarea>
  <p>{{ foo }}</p>  
</div>

<script>
new Vue({
  el: '#app',
  data: {
    foo: document.getElementById('defaultField').value
  }
});
</script>

単純だった

props も created, mounted も使わず、ふつうに Vue.js 側の data の初期値に、DOM読んで取ってきた値を入れてやる

それだけなんだけど、ちょっと時間使っちゃったのでメモでした (もっと Vue.js らしい上手なやり方とかあるのかな…)

↓Codepen で試したの、こちら

See the Pen vue.js default value by h.matsuo (@matsuoshi) on CodePen.

2019-09-06

Googleの検索結果から、日本語ページを対象外にしたり、日本語のみを対象にしたりするブックマークレット

javascript bookmarklet google

f:id:matsuoshi:20190904151149p:plain

Qiitaに書いた記事の続き

qiita.com

英語のみでググりたい

技術系のことをググるとき、検索対象を英語のみにしたい(というか、日本語ページを除外したい)場合が多い

検索結果画面の「ツール」のところからだと

すべての言語
日本語のみ

の2つしか選べない。

「すべての言語」を選択しても、日本語のページがけっこう混ざってくる。日本語以外だけを、対象にしてググりたいんだよな〜〜

ブックマークレットを作った

ということでブックマークレットを作った

Googleの検索結果表示を「日本語を除外」←→「日本語のみ」に、さくっと切り替えられます

こちらです。

javascript:(()=>{u=new URL(location);u.searchParams.set('lr',(u.searchParams.get('lr')=='-lang_ja')?'lang_ja':'-lang_ja');location.href=u.href;})()

使い方

ググったあとの画面で、このブックマークレットを呼び出してください。

呼び出すたびに、表示が「日本語を除外」←→「日本語のみ」と切り替わります

技術系のことをググるときなどにたぶん便利

やっていること

クエリパラメタとして lr=-lang_ja などの値をつけているだけです

lr=lang_ja だと日本語のみが対象、値の前に - をつけて lr=-lang_ja とすることで日本語が除外されます

ところで JavaScript でURLを操作するのに、URL オブジェクトが便利でした

developer.mozilla.org

コードは展開するとこんな感じ

(() => {
    let u = new URL(location);
    u.searchParams.set('lr', (u.searchParams.get('lr') == '-lang_ja') ? 'lang_ja' : '-lang_ja');
    location.href = u.href;
})()