読者です 読者をやめる 読者になる 読者になる

鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

vue.jsでv-componentを使ったTodo難しい。

TodoMVCのvue.jsのサンプルはVueに付属しているのですが、 v-componentを利用して、そして、バリデーションも使って 実現してみたいなぁと試しているけど、思うように動かすことができていない。

1つ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テンプレートで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に慣れてきた?!

dokechin/Todo at v0.4 · GitHub