Arrayで使いたいメソッドがObserverになっていて使えない問題の対処法

3488 ワード
Vue.js JavaScript array observer JavaScript テキストリンク

現象

mapがない！！😇

概要

Nuxt.jsで色々ごちゃごちゃやってたときにググっても解決方法が出てこず詰まってしまった。
やりたいことは意外と単純で、mapメソッドを使いたかっただけなのだが思いの外しんどかったのでメモ

筆者が取得しようとしたArrayがObserverになってしまっていたケース

assets/js/profile/skill.js
export default {
  language: {
    javaScript: {
      name: 'JavaScript',
      framework: ['Vue.js', 'Nuxt.js', 'React.js', 'AngularJS', 'jQuery']
    }
  }
}
index.vue
import skill from '~/assets/js/profile/skill.js'

こんな感じで持ってきた中の、frameworkがObserverとなります。
index.vue内で指定するときはskill.language.frameworkですね。

対処法

  • Array.prototype.関数名.callを使う
    • 本来使えないメソッドを使えたりできるやつらしい、あまり使ったことがない
  • ↑の第一引数をObjectでキャストする
    • これをしないとTypeError: Array.prototype.map called on null or undefinedが発生してしまう

コード

おそらくmapの部分を書き換えれば他のメソッドも動作すると思います。
xxxの部分はobserverになっているArrayを入れてください。

      const arr = Array.prototype.map.call(Object(xxx), value => {
        // process
      })