Auswählen von Optionen aus berechneten Eigenschaften mit Vue JS

Question

Ich versuche, eine Auswahl aus Vue mit einer berechneten Eigenschaft zu erhalten.

Hier ist eine Geige ich arbeiten bin: https://jsfiddle.net/2m18ab1v/13/

Hier ist, was meiner Meinung nach-Modell wie folgt aussieht:

var vm = new Vue({ 
     el: "#app-container", 
     data: { 
      offer: { 
       unit: '', 
       tags: '', 
      }, 
      protocol: protocol 
     },    
     computed: { 
      getUnits: function(){ 
       var unitsList = []; 
       var tagList = this.offer.tags.split(","); 
       console.log(tagList); 
       for (var i=0; i<tagList.length; i++){ 
        unitsList += this.protocol[tagList[i]]["units"]; 
       } 
       console.log(unitsList); 
       return unitsList; 
      } 
     } 

    }); 

und das Objekt 'Protokoll' in der referenzierten Daten:

var protocol = {"wireless": 
       { 
       "units": {"bandwidth": "bit/s", "distance": "kilometers"}, 
       "children": [], 
       } 

Ich möchte als meine <select> Auswahlmöglichkeiten "Bit/s" und "Kilometer" haben. Ich habe in meiner Vorlage so etwas wie dies versucht:

  <div id="app-container"> 
        <select v-model="offer.unit"> 
        <option v-for="item in getUnits" v-bind:value="value"> 
         {{ item }} 

        </option> 
        </select> 
       </div> 

console.log(unitsList) kehrt Object { bandwidth: Getter, distance: Getter, 1 more… }

So offensichtlich, was ich versuche, ein Objekt von einer Art zu erhalten ist. Ich bin etwas neu in Vue und ich versuche zu verstehen, wie der "Getter" funktioniert. Gibt es einen einfachen Weg, um seinen Wert zu erhalten?

Answer 1

Wenn Sie versuchen, die Einheiten zu sammeln, erhalten Sie mit += in js nicht das gewünschte Ergebnis. In diesem working fiddle habe ich stattdessen concat verwendet, um die units unter wireless mit anderen zu concat. (Vorausgesetzt, Sie haben andere Protokollkategorien auf derselben Datenbaumebene wie wireless). Abhängig von Ihrem tatsächlichen Bedarf benötigen Sie möglicherweise push. Werfen Sie einen Blick auf ihre docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push