vue cli ：キーワード（名前）と金額（◯円以上◯円以下）での絞り込みについて

Question

前提・実現したいこと

下記イメージ画像のように、名前と金額（◯円以上◯円以下）から絞り込みをしたいと思っております。

色々なサイトを参考にさせていただき、下記のコードを考えてみたのですが
実現したい絞り込みができません。
（金額での絞り込みはできますが、名前からの絞り込みができません）

下記コードの間違いをご教授いただければ幸いです。
よろしくお願いいたします。

尚、参考にさせていただいたサイトですが
色々検索しすぎて参照元がわからなくなってしまいました。申し訳ありません。

該当のソースコード

<!-- 名前検索 -->
<div class="search">
      <input type="text" v-model="search">
</div>
<p>{{ search }}</p>

<!-- 金額タグ検索 -->
<ul>   
      <li v-for="(target, index) in targets" v-bind:key="index">
        <input type="checkbox" :id="target" v-bind:value="target" v-model="selectedTargets">
        <label :for="target">{{ target }}</label>
      </li>
</ul> 
<p>{{ selectedTargets }}</p>    

<!-- 検索結果 -->
<ul>   
    <li v-for="item in itemsList" v-bind:key="item.id">       
      <p>{{ item.name }}</p>  
      <p>{{ item.price }}</p>          
    </li>  
</ul> 

export default{
  data(){
    return{
      items:[
        { "id": 1, "name":"あああ", "price":500},
        { "id": 2, "name":"いいい", "price":30000},
        { "id": 3, "name":"ううう", "price":6000}
      ],
      //名前から検索
      search: '', 
      //金額から検索
      targets: ['5,000円以下','5,001円~10,000円','10,001円以上'],
      filtersAsPrice: {
        '5,000円以下': [0, 5000], '5,001円~10,000円': [5001, 10000], '10,001円以上': [10001, 1000000]
      },
      selectedTargets: []
    }
  },   
  computed: {
    itemsList(){
      return this.filterByPrice(this.filterByName(this.items)) 
    }  
  },
  methods: {
    filterByName: function() {
      if(this.search.length > 0){
        return this.items.filter(item => !item.name.indexOf(this.search))  
      } else {
        return this.items
      }  
    },
    filterByPrice: function(){
      return this.items.filter(item => {
        if(this.selectedTargets.length > 0){
          let priceReturn
          Object.keys(this.filtersAsPrice)
            .filter(priceRange=> 
              this.selectedTargets.includes(priceRange)
            )
            .filter(priceRangeFiltered => {
              let low = this.filtersAsPrice[priceRangeFiltered][0]
              let high = this.filtersAsPrice[priceRangeFiltered][1]
              if (item.price >= low && item.price <= high) {
                priceReturn = item
              } 
            })
          return priceReturn
        } else {
          return this.items
        }
      })
    },
  } 
}

Answer 1

名前での絞り込みであるfilterByNameメソッド自体は問題なく絞り込みが行えていますが、金額での絞り込みのfilterByPriceがもともとのitemsを使っているのでfilterByNameで絞り込んだ結果が利用されていません。

以下filterByPriceの修正例です。

- filterByPrice: function () {
-   return this.items.filter((item) => {
+ filterByPrice: function (items) { // ここで引数にして受け取る
+   return items.filter((item) => {
    if (this.selectedTargets.length > 0) {
      let priceReturn
      Object.keys(this.filtersAsPrice)
        .filter((priceRange) => this.selectedTargets.includes(priceRange))
        .filter((priceRangeFiltered) => {
          let low = this.filtersAsPrice[priceRangeFiltered][0]
          let high = this.filtersAsPrice[priceRangeFiltered][1]
          if (item.price >= low && item.price <= high) {
            priceReturn = item
          }
        })
      return priceReturn
    } else {
-       return this.items
+       return items
    }
  })
},
    },

Comments

[hihamo]

ご回答ありがとうございます。無事絞り込みができました！
名前での検索結果を使わずに、もともとのitemsデータを使って検索していたためなんですね。
自分では気づけませんでした。ありがとうございました。

＊＊＊

一点追加で質問をさせていただいてもよいでしょうか。

返り値のpriceReturnにつきまして、最初にlet priceReturnと定義していますが
変数は、「let ◯◯ = 〜　」という定義方法でなくても良いのですか？

参考にさせていただいたコードがこのようになっていた為
そのまま使わせて頂いたのですが、気になっていたことを思い出しました。
別件かつ初歩的な質問で申し訳ございません。
もし教えていただければ有難いです。
ご検討よろしくお願いいたします。

[fuuga]

変数を事前に準備しているだけであればこの方法で問題ありません。(文法的にもエラーにはなりません)
`let priceReturn`という書き方は`let priceReturn = undefined`と書いているのと同じものです。

※undefinedとは値が未定義の状態を指します。(nullとは違います)

[hihamo]

ありがとうございます。
let priceReturn = undefined と書いているのと同じという点が特にわかりやすく
理解できた気がしました。
nullとは違うという点も言及してくださって、改めて違いを確認できました。
ご回答くださいまして本当にありがとうございました。