ラジオボタンの値を登録できているようでできていない ローカルストレージ

Question

初心者です
ttps://cr-vue.mio3io.com/tutorials/todo.html

こちらを参考に、自分用にアプリを作ろうとしています。

登録していないが完了したものも登録したく、作業中と完了を追加する時点で選択したいと思っています。
そこで、2択のラジオボタンで、valueを0と1で区別しました。
それをjqueryで取得し、

var val= $('input[name=stts]:checked').val()

そして、step7のところに、

this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: val
      })

という形でstateの値として保存　しているつもりです。

結果として、表示切替(step12)の「すべて」には選択したとおりにきちんと追加されるのですが、
「作業中」「完了」には表示されません。

しかし、リストにある状態変更ボタン(step13)で変更するとちゃんと表示されるようになります。

なぜすべてには状態もしっかり表示されるのに、状態で表示切替すると表示されないのでしょうか。
きちんとローカルストレージにstateの値として登録されておらず、切り替えることでちゃんと登録される手順を踏むのかと思いましたが、すべてではしっかり表示されるのです。

変数を使用せず、

this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: 1
      })

と、常に１で登録されるようにしてみるとちゃんと完了に追加されていきます。(0=作業中　1=完了）
確認しましたが、変数はしっかり選択したvalueの値を読み取っていました。なにがいけないのでしょうか。

この説明で伝わるでしょうか。アドバイスいただけますと助かります。

Answer 1

全体像が不明瞭なので、参考サイトからの推測ですが、

var val= $('input[name=stts]:checked').val()

で取得したvalが文字列の'1' '0'なので、

{ value: -1, label: 'すべて' },
{ value: 0,  label: '作業中' },
{ value: 1,  label: '完了' }

のvalueと比較したときに型がかみ合わず、表示されないのではないでしょうか。
「すべて」のときに表示されるのは比較がなく文字通り全部表示するからだと思います。

Comments

[terame120]

ご回答ありがとうございます。
型が噛み合わないとは、文字列と数列ということでしょうか。
そう解釈し、先ほど''を取り除いてみたところ、javascriptが動かなくなってしまいました。数値として呼び出すための方法をもし知っていれば、教えていただけますと幸いです。分からない、面倒、場合は放っておいていただいて問題ありません。見当違いでしたら申し訳ありません。

[NozomuIkuta]

自分の回答自体が曖昧なものなので、間違っているかもしれません。可能であれば、今書いているコードを、出来れば全体を質問に貼っていただけますか？

[terame120]

不明瞭なままで突っ込んだお話を聞いてしまい申し訳ありません。パソコンがネットに繋がらなくなり、全体をのせられずにいたのですが、先ほど解決いたしました。
数値と文字列の違いで噛み合わなくなる、ということを念頭に考えるととても納得で、調べて数値に変換をしてみたところ、うまくいきました。本当にありがとうございます。

[NozomuIkuta]

解決したようでよかったです。
ちなみに「==」で比較することで文字列と数の比較時に暗黙の型変換がおきるので、'1' == 1 をtrue扱いにもできます。
ただ、普段から型を意識した方が思考(処理)も整理されるので、「===」の比較をおすすめします。

[terame120]

そういう方法もあるのですね。はい、これから型を意識していきたいと思います。教えていただき、ありがとうございました。

Answer 2

###ちょっと立ち止まって
JavaScriptの使用される型宣言にはなにがありますか？
その時数値を扱うならどんな方で宣言すればいいですか？
まずはそこをしっかり認識されるのが今後のためにも近道だと思いますよ。
###JavaScriptだけに気持ちが向いていますが
現在がJavascript で成功していないなら完全に文字にvalue値を変更されてみられるのも一つの方法ではないでしょうか？
だって文字列の0と数値の0を比べたらいったいどういう結果がえられますか？
null にはなりませんか？

Comments

[terame120]

ご指摘の通りです。これからコードをさわっていく上で、基本を意識するようにしたいです。javascriptはドットインストールを一通り見ながら同じように打った程度の知識でしたので、型宣言とは…？と調べ始めるくらい基本が思い出せないのはこれからのために良くないですね。

考え方の転換についても、文字列でやることも考えたのですが、value値での振り分けのコードに数値の大小を用いているようでしたのでできたら数値が良いなと思っておりましたが、改めて考えてみると、自分でわかる範囲でのコードの文字列使用への書き換えかたはあったなあと感じました。
この先に有用なご回答をありがとうございます。

[phpsyoshinsya]

私もJavaScriptはそんなに詳しくありませんが、「数字」と「数値」をはっきりさせておいた方が今後のスクリプティングには役立つと思います。数値宣言や数字（文字）宣言など、今まで意識する必要のなかったことが急に求められるので、戸惑いますよね。

Answer 3

state=Number(val)
とすることで解決しました。