---

ソート関連のバグを潰し終え、ごきげんごきげんです＾＾

ということで、次なる不具合の修正に進みます。



検索結果表示画面から、再び検索するとなーーーぜかエラーを吐き出します。Cannot read property 'length' of undefinedとのことですのでここにヒントがありそうですね。


まず、直接的な原因としては、ストアから配列を受け取れてない、ってとこですね。値が入っているべきところに値が入ってないわけです。




ここから壮大な話をしようと思ったんですけど、単なる僕の凡ミスでした（）
this.results.cocktail= this.cocktails.slice()の部分がthis.results = this.cocktails.slice();になってたので、参照できない配列が渡されてた、っていう痛恨のミスですね。



さて、何の話をしよう。新規学習項目がなければ日記として使えるネタもないぞ、はて･･････？とか思ってたところ、ちょうどいいのを見つけたので解説することにしました。ミックスインという機構ですね。



名前から検索すると、カクテルの検索結果だけでなく、銘柄などのデータも一緒に検索して返すような仕様にしてるので、コンポーネントに分けて実装しているんですが、どのコンポーネントもこのへんのメソッドは共通しています。
まぁほんとは特殊なソートとかあるんで、sortBy関数に関しては切り分けられないんですが、sortedClassに関しては全部一緒です。たぶんこれは変わることはないです。
で、これがすべてのコンポーネントのmethodにあるっていうのは正直気持ち悪いので、どっかで共通化できないかな･･････？と思ったときに利用するのがこのミックスインです。


まぁ使い方は簡単です。雑にモジュールを用意してimportするだけです。コードを貼り付けるまでもありません(笑)



とりあえずそういう機能がフレームワークから提供されてるんですよっていう知識メモでした。これでコードが少しは減るかなって思います。
あと、これで検索画面の大枠は完成なので、次の工程に進みたいなって思います。次に実装すべきは･･････ポップアップ検索ですかね。検索結果自体は使いまわしが利くので、問題となるのはポップアップをどうするかですね。bootstrapは使えるかどうかわからんのですが、確かvueの方でモダンなフロントフレームワークがあったような･･････？？？


っていうのも含めて調べていこうかなって思っております。