Vueでsliceメソッドがプロパティとして認識されている

Question

現在Vue.jsでWebアプリを製作中です。

2019-03-01のような日付を2019年03月01日のように書き換えるためにsliceメソッドを使っているのですが、JavaScriptコンソールでCannot read property 'slice' of undefined"とエラーが表示されてしまいます。

メソッドではなくプロパティとして認識されているために出るエラーだと思うのですが解決策はありますでしょうか？

該当箇所のコードは以下の通りです。お力をお貸しいただければ助かります。

<v-flex>{{currentUser.birth | JPdate}}</v-flex>

  filters: {
    JPdate: function (value) {
      return value.slice(0, 4)+"年"+value.slice(5, 7)+"月"+value.slice(8, 10)+"日";
    },
  },

Answer 1

メソッドではなくプロパティとして認識されているために出るエラーだと思うのですが解決策はありますでしょうか？

いえ、そもそもJavaScriptでは、メソッドもプロパティの一種です。

このエラーの原因はundefinedの方で、valueにundefinedが来てしまうと、.sliceを取り出そうとした時点でエラーとなります。

Answer 2

メソッドではなくプロパティとして認識されているために出るエラー

ではなく、currentUser.birthがundefinedのため、「undefinedにはsliceというプロパティはない」というエラーです。（関数も、オブジェクトのプロパティです。）

全体像が見えないので、正確には回答できませんが、以下を確かめてみてください。

• currentUser.birthが存在するか
• currentUser.birthの初期値がundefinedではないか（あとで値が設定されるようになっていないか）

currentUser.birthの初期値を空の配列[]にするか、
フィルターに条件判定を入れておく（下記参照）などが方法として考えられます。

filters: {
  JPdate: function (value) {
    if (!value || !Array.isArray(value)) { // 条件判定はお好みで
      return ''
    }
    return value.slice(0, 4)+"年"+value.slice(5, 7)+"月"+value.slice(8, 10)+"日";
  },
},

Comments

[Khy]

詳細に教えて頂きありがとうございます！
currentUser.birthを初期化していなかったのが原因だったのですね。。
初期値を入れることで無事解決いたしました。ありがとうございました！