vue.jsはデフォルト

Question

として、私はそれがどこかに行くのにかかる時間を返す必要がありvue.jsを学習するための小さなツールを作成しようとする配列からランダムオプションを選択します：Codepen

それは今のところ、多かれ少なかれを動作しますが、ページの読み込み時に各配列からランダムな値を追加したいと思います。どうしたらいいですか？

<select class="selectpicker" id="locationApp" v-model="selectedLocation"> 
     <option v-for="entry in locList" v-bind:value="entry.distance">{{ entry.name }}</option> 
</select> 

-

var App = new Vue({ 
    el: '#App', 
    data: { 
    locList: [ 
     { name: 'New York', distance: '100' }, 
     { name: 'Barcelona', distance: '500' }, 
     { name: 'Hawaii', distance: '600' } 
    ], 
    vehicleList: [ 
     { name: 'Car', speed: '100' }, 
     { name: 'Bicycle', speed: '25' }, 
     { name: 'A pair of Shoes', speed: '5' } 
    ], 
    selectedVehicle: '0', // here I'd like to add a random speed 
    selectedLocation: '0',// here I'd like to add a random distance 
    }, 
    computed: { 
    calculateThis: function() { 
     return Math.abs(this.selectedLocation/this.selectedVehicle) 
    } 
    } 
}); 

私は準備ができて、タグについて読む：ここ

ready: function() { 
    //I guess I have to grab the select here somehow ?? 
    }, 

Answer 1

が更新codepenです。 vue.js 2.0を使用する場合はthis.$tickと組み合わせてmountedメソッドを使用してください。

v-modelを使用し、選択オプションに値を追加したので、「ランダム」値をv-model変数に割り当てる必要があります。

ここ

mounted: function() { 
    this.$nextTick(function() { 
     var randomVehicle = Math.floor(Math.random() * this.vehicleList.length); 
     var randomLocation = Math.floor(Math.random() * this.locList.length); 
     this.selectedVehicle = this.vehicleList[randomVehicle].speed; 
     this.selectedLocation = this.locList[randomLocation].distance; 
    }); 
}, 

見数学ランダム計算がより多くの何もしないよう、ランダム選択の範囲を提供しています。私はちょうどこれを使用しました....最大のための長さと最小のための0。