vue.jsでv-componentを使ったTodo難しい。
TodoMVCのvue.jsのサンプルはVueに付属しているのですが、 v-componentを利用して、そして、バリデーションも使って 実現してみたいなぁと試しているけど、思うように動かすことができていない。
1つ１つのTodoをv-componentにして、親のTodo一覧に 編集中のTodoを持つようにして処理しています。
dokechin/Todo at v0.1 · GitHub
バリデーションはTodoのフィルターの中で行っていて、 バリデーション結果を自身(this)のデータvalidationに設定している。
nameValidator: function (val) {
this.validation.name = !!val;
console.log("validators" + val + !!val);
return val
},
どうも、Todo自身に設定しているはずが 違うところに設定されている感じ？
JavaScriptのthisキーワードをちゃんと理解する - builder by ZDNet Japan
thisが何かchromeのデバッグでみてみたら、iという値になっていた。 何だろうこれは。もしかして、１テンプレートで1つのインスタンスを共有している？ はて、フィルター内で、自身のv-componentを取得したいのですが どうしたらいいんだろう。
ちなみに、vue.jsのexampleの中のfilterの中のthisはちゃんとViewModel になっている。
Firebase + Validation - vue.js
違いは何かというと、v-component内のfilterか、ViewModel内のfilterかの 違いなのですが・・
結局、親のメソッド(newTodo)で、配列に子メンバを追加するときに、 validationを渡していなかったから見たいです。 子のコンストラクタのdataに定義してはいけないんだなぁ。
methods: { newTodo : function(){ this.todos.push ({done:false, name: this.new_name, validation : {name:false}}); this.new_name = ""; } }
その他、もろもろv-withの使い方間違っていたりを直して 完成形。削除とか実装していないけど・・・ 少し、vue.jsに慣れてきた？！
