はてなブックマーク

はじめに form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングさせるためには、 v-model を使用します😇 しかし、 Vue.js のドキュメントに以下のようなことが書いてあります。 v-model は任意の form 要素にある value、checked または selected 属性の初期値を無視します。input または textarea は常に、信頼できる情報源として Vue インスタンスを扱います。コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。 つまり、 v-model は入力の初期状態を無視するため、フォーム要素でチェックまたは選択した値を設定することはできません😿 常に Vue インスタンスデータが扱われるので、 初期値を設定するた

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

propsを利用して親コンポーネントのデータを受け取ろうとしたが、そのデータがundefinedになり、 ハマったので、その備忘録です。 親子間のデータ受け渡しについておさらい まずはコンポーネントにおけるデータの流れについて少しおさらいしようと思います。 Vueでは、親子のコンポーネントの関係は、props down, events upというように要約することができます。 親は、 プロパティを経由して、データを子に伝え、子はイベントを経由して、親にメッセージを送ります。 プロパティによるデータの伝達について 全てのコンポーネントインスタンスは、各自の隔離されたスコープ (isolated scope) を持ちます。 つまり、子コンポーネントのテンプレートで親データを直接参照できない(そしてすべきでない)ということです。 データはプロパティを使用して子コンポーネントに伝達できます。 要す

はじめに Vue.jsで生成したオブジェクトは$watchというメソッドを持っています。 これによりデータの変更を監視することが可能になります。 しかし、$watchメソッドは、オブジェクトの追加や削除を検出してくれますが、 オブジェクトの値が変更された場合は検出しません。😢 次のような例をみてください。 (※例ではVueインスタンスのwatchオプションに設定していますが、インスタンス化したときにオブジェクトの各エントリに対して$watchメソッドが呼び出されます) <script> export default { data () { return { someObj: { a: 'obj-a', b: 'obj-b', c: 'obj-c' } } }, watch: { someObj: function (val, oldVal) { console.log('someObj

var checkBoxes = document.getElementsByClassName("checkBox"); for(var key in checkBoxes){ if(checkBoxes[key].classList.contains("checked")){ checkBoxes[key].checked = true; } } 盛大に勘違いしていたのですが、 getElementsByClassName()メソッドが返す値は配列だと思っていたら、実は違った！ getElementsByClassName()は、配列に似ていますが実際には配列ではないHTMLcollectionオブジェクトを返します。 配列ではないので、例えばforEachみたいな便利な配列メソッドを呼び出すことはできません。 また、 for/inを使用してHTMLCollectionを反復処理するこ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Vue.jsのドキュメント書いてある #computed 算出プロパティ(例 aDouble: () => this.a * 2) を定義するためにアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.a が undefined になるため、親コンテキストに束縛できないことが理由です。 とか #data data プロパティ(例 data: () => { return { a: this.myProp }}) でアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.myProp が undefined になるため、親コンテキストに束縛できないことが理由です。 が見ていて気になったので、thisについての復習も兼ねて調べてみました。 アロー