0

計算されたプロパティを使用して Vue で動作するように select を取得しようとしています。

ここに私が取り組んでいるフィドルがあります: https://jsfiddle.net/2m18ab1v/13/

私のビューモデルは次のようになります。

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;
            }
        }

    });

そして、データで参照される「プロトコル」オブジェクト:

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

<select>「ビット/秒」と「キロメートル」を選択したいと思います。私は自分のテンプレートでこのようなことを試みてきました:

           <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)戻り値Object { bandwidth: Getter, distance: Getter, 1 more… }

どうやら、私が取得しようとしているのは、ある種のオブジェクトです。私は Vue に少し慣れていないので、「ゲッター」がどのように機能するかを理解しようとしています。その値を取得する簡単な方法はありますか?

4

1 に答える 1

1

単位を収集しようとしている場合+=、js で使用しても目的の結果が得られません。この作業中の fiddleでは、代わりに、アンダーを他のものconcatと連結するために使用しました。( と同じデータ ツリー レベルに他のプロトコル カテゴリがあると仮定します)実際の必要性によっては、 が必要になる場合があります。彼らのドキュメントを見てみましょう: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat https://developer.mozilla.org/en-US/docs/ Web/JavaScript/リファレンス/Global_Objects/配列/プッシュunitswirelesswirelesspush

于 2016-11-03T14:10:14.687 に答える