propがうまくいかない

Question

お世話になります。Vue.jsとaxiosを用いてjsonファイルからリストを取り出し、フィルタリングしてリストを表示するコンポーネントを作成しています。

<sample val="a"></sample>

このように書いてvalの値でフィルタリングをしたいと思っております。

<template>
<div>
    <div>
      <ul>
        <li v-for="list in lists" v-bind:key="list.id">
            <a :href="`/word/`+list.ehead+`/`+list.eword+`.html`">{{list.eword}}({{list.jword}})</a>
        </li>
      </ul>
    </div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: ["val"],
 data() {
   return {
     fulllists: [],
 }
 },
 created: function() {
   axios.get('/list.json').then(function(response) {
     this.fulllists = response.data
   }.bind(this)).catch(function(e) {
     console.error(e)
   })
},
computed: {
 scope: function(){
     return this.val
 },
 lists: function() {
   return this.fulllists.filter(function(i) {
     console.log(i)
     return i.ehead === 'scope'
   })
 }
},
}

</script>

[
  {
    "id": 1,
    "eword": "abalone",
    "jword": "アワビ",
    "ehead": "a",
    "jhead": "あ",
    "ecat": "food",
    "jcat": "食物"
  },
  {
    "id": 1013,
    "eword": "dystopia",
    "jword": "ディスコピア",
    "ehead": "d",
    "jhead": "て",
    "ecat": "place",
    "jcat": "場所"
  }
]

vueのツールで確認するとval="a"となっているときはscopeがaになっているのですが表示されません。
ご教授のほどよろしくお願い申し上げます。

Answer 1

こんな感じでは動きませんか？

 lists: function() {
   // filterの中のFunctionからvueインスタンスを示すthisを使いたいので
   const self = this;
   return this.fulllists.filter(function(i) {
     console.log(i)
     // thisではなくselfでvueインスタンスのscopeにアクセスする
     return i.ehead === self.scope
   })
 }

Answer 2

こうすればいかがですか？

return i.ehead === 'scope'
↓
return i.ehead == this.scope

<追記>
画面起動して最初のfilterが動く際に、算出プロパティのscopeが初期化されていないため、undefinedになっているようです。

以下のように、propのvalを直接参照しても、動くと思います。（こちらでは動きました）

    lists: function() {
      return this.fulllists.filter(i => {
        console.log(i)
        return i.ehead == this.val
      })
    }

Comments

[1042limit]

お返事ありがとうございます。
Error in render: "TypeError: Cannot read property 'scope' of undefined"
と変更すると出てしまいます。。