計算されたプロパティを使用してVue内のselectに入れ子になったJSON配列をロード

Question

私のVueコンポーネントには元々、JSONデータを通ってテキスト入力を表示するか、has_selectable_valueオプションがtrue（表示選択）またはfalse（テキスト入力表示）で、選択された場合はデータをループして関連付けられたオプションを出力します。

私はこれを、選択オプションを表示するための小さなものとは別に、ほとんど必要なすべてを実行する計算文に変更することができました。ここで

は、Vueのコードの関連する部分である：

<template v-else-if="searchtype == 9"> 
    <select v-for="service in selectableServices" class="form-control" v-model="searchvalue" required> 
     <option value="">Select A Location</option> 
     <option v-for="sl in selectableLocations" :value="sl.location_id">{{sl.name}}</option> 
    </select> 
    <input v-for="service in nonSelectableServices" class="form-control" v-model="searchvalue" placeholder="Enter Search Value" required> 
</template> 

現在の計算された機能：

services: function() { 
    var ret = [] 
    this.countries.forEach(function(country) { 
     country.states.forEach(function(state) { 
      state.services.forEach(function(service) { 
       ret.push(service) 
      }); 
     }); 
    }); 

    return ret;    
}, 
selectableServices: function() { 
    return this.services.filter(service => service.id == this.service && service.has_selectable_location); 
}, 
nonSelectableServices: function() { 
    return this.services.filter(service => service.id == this.service && !service.has_selectable_location); 
}, 
selectableLocations: function() { 
    // Filter one more level down 
    return this.selectableServices.map(service => service.selectablelocations); 
}, 

これは私も（私は戻ってそれをカットして働いていますJSONデータ構造であります

[ 
    { 
    "id": 1, 
    "name": "Country Name", 
    "states": [ 
     { 
      "id": 1, 
      "name": "State Name", 
      "services": [ 
        { 
        "id": 1, 
        "name": "Service Name", 
        "has_selectable_location": 1, 
        "selectablelocations": [ 
          { 
           "id": 1, 
           "name": "Selectable Location A", 
          }, 
         ] 
        } 
       ] 
      } 
     ] 
    } 
] 

Chrome用Vueプラグインを使用すると、次のことができます。計算された関数selectableLocationsが個々の場所を含む配列を読み込みますが、既存のv-forステートメントは正しく機能しません。代わりに、私はまだ、私は余分なV-ためそれほどのようなループを追加することによって行うことができます1つのより下のレベルに移動する必要があります：

<template v-for="selectableLocationsList in selectableLocations" > 
    <option v-for="sl in selectableLocationsList" :value="sl.location_id">{{sl.name}}</option> 
</template> 

すべてが正しく表示されるが、これはベストプラクティスであるならば、私は期待していたように私にはわかりません可能な限り計算された関数でこれを実行し、理想的には単一のv-forステートメントだけを必要とします。しかし、私が理解できるようなことができないなら、私はそれをそのまま残すことができます。

ありがとうございます。

編集：より多くの試験研究の後、私は希望していたとして働いて、このコードが出ている：

var formArray = [] 
var locationsArray = this.servicesArray.filter(service => service.id == this.service); 

locationsArray.map(service => service.selectablelocations); 

locationsArray.forEach(function(selectableLocations) { 
    selectableLocations.selectablelocations.forEach(function(location) { 
     formArray.push(location) 
    }); 
}); 

return formArray; 

は、私はこれをさらにリファクタリング、それは少しきれいにすることができます方法はありますか？ 、mapあなたはArray.prototype.mapとして何もしない使用だけで新しい配列を返すこと

が

let formArray = []; 

formArray = this.servicesArray 
    .filter(service => service.id == this.service) 
    .map(service => service.selectablelocations) 
    .reduce((prev, curr) => prev.concat(curr)) 

return formArray 

注：

Answer 1

もっぱらあなたは編集後に掲載コードを考慮すると、コードはこのようにリファクタリングすることができますあなたはそれを何にも割り当てていませんでした。