"TypeError: obj.indexOf is not a function"エラーが出た時

Vue.jsでindexOfを使っていると

Vue.jsでindexOfを使っていると割と頻繁に"TypeError: obj.indexOf is not a function"エラーに遭遇します。
大体の原因は、型が原因になっています。

indexOfは文字列にしか使えない

私がindexOfで上記のエラーに遭遇する時は、indexOfの参照元を数字にしてしまっている時です。
例えば以下の状況はエラーになります。

new Vue({
  el: '#app',
  data: {
    selectCategory: '1',
    items: [
      {category:1, name:'hoge'},
      {categoyr:2, name:'piyo'}
    ]
  },
  computed: {
    get: function(){
      var self = this;
      return this.items.filter(function (item) { 
        return item.category.indexOf(self.selectCategory) !== -1; 
      });
    }
  }
})

選択したカテゴリー（selectCategory）でフィルターをかける時に、参照に配列（items）のオブジェクトプロパティのカテゴリー(category)を指定しています。
この時に、カテゴリーの型が数字になっているため、"TypeError: obj.indexOf is not a function"エラーが発生しています。

解決

毎回型とか気にするのが面倒ならば、つねに文字型に変換して参照すれば良いと思います。
下記はその例

String(item.category).indexOf(self.selectCategory)

上記のエラーだったスクリプトを修正すると下記になります。

new Vue({
  el: '#app',
  data: {
    selectCategory: '1',
    items: [
      {category:1, name:'hoge'},
      {categoyr:2, name:'piyo'}
    ]
  },
  computed: {
    get: function(){
      var self = this;
      return this.items.filter(function (item) { 
        return String(item.category).indexOf(self.selectCategory) !== -1; 
      });
    }
  }
})

まとめ

割と頻繁に引っかかるので、忘れなように備忘日記でした。
当方ぺちぱーにて、型のこととか時々忘れそうになります。

今日はこの辺でー