24
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-26

現象

mapがない!!😇

スクリーンショット 2018-11-27 1.06.29.png

概要

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
      })
24
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?