学習補助アプリの制作4 〜配列〜

かなりお久しぶりです！　ちろるちょこ🍫です。

今回も進めているアプリ制作について纏めていきます！

前回したこと：エラーを直して、配列の要素の下に要素数を表示できるようにした。また、配列に入れた要素を選択できるようにした。

今回すること：アプリを実装する(続き)。

今回進めた所は「pop、shift、unshift」のボタンを追加です。

もともと「push」だけだったのですが、3つボタンを増やしました。↓

下から３つ目の「配列名から indexをとってくる部分」にすこし不具合（選択肢が空白の時に値が入ってしまう）が残るのですが、基本的には動くようになりました。

ここまで動かせれるようになるまでに、悩んで物凄く回りくどいプログラムを書いてるので、参考にはなりませんが迷っていた部分と解決策を書きます。

ボタンの追加は、配列に対してpushやshiftの命令を書くと出来たので、良かったのですが問題は下から３つ目の「配列名から indexをとってくる部分」です。

書く前までは「v-for使ってindex取ってこれば良いや」と思っていました。

ちなみに下のテーブルはv-forで配列の値もindexもとってます。↓

        <tr v-for="(yousomei, index) of inputs">
           <td>{{index}} </td>
           <td>{{ yousomei.name }} </td>
           <td> {{index+1}}</td>
       </tr>

この要領で、セレクトボックスで選択した値のindexをとろうと思っていました。

   <span><select　v-model="selected" >
           <option v-for="(option,index) of options" v-bind:value="option.value">
               {{option.text}}
           </option>
       </select>
   </span>
   <span>
       は {{hairetsu_name}}[{{index}}] です
   </span>

この下から２行目の{{index}}の所に、選択した値のindexを入れたかったのですが、v-forがoptionタグの中だから、indexが使えないという事にここで気づきました。

ここから「セレクトボックスで選択した値のindexを取得」の為に大きく分けて3パターンほど試しました。

・何とかしてv-forのindexを外部に持ってこれないか

調べても分からなかったです。（そもそもoptionには何が選択されているかという情報が分からないので、多分無理ですよね。。。）

・var selectedIndex = $("#id ").get(0).selectedIndex;を使う

まず＄を記述した時点でエラーが出て全く動かなかったです。

selectのidを取得して、selectedIndexをつけるとindexが取ってこれるらしいのですで、＄を使わない方法も試しましたが、undefinedになり無理でした。

・配列のvalue値をそのまま使う

pushだけならvalue値＝index番号が成り立つので、出来ました！

しかし一度設定したvalue値が上書きできなかったので、unshiftを使ってしまうと上手くいかなかったです。

こんな感じで試行錯誤していくうちに、

value値に工夫をして何とか正しく動くようにしました

pushで追加された値を０より上の数で、unshiftで追加された値の数を0より下の数で別々に管理して、unshiftで追加された値の個数をプラスすることで動くようにしました。

凄い付け焼刃感がするので直したいな。。。

次回は、自動問題生成ができるプログラムに取り組みたいと思います。

ありがとうございました！