Laravel 5.2 Vue.jsが計算されない

Question

vueが返すオブジェクトを表示するにはどうすればよいですか？ 州はOkですが、都市v-forは機能しません。

これは私のブレードです：

<select v-model="ProvinceModel" name="province" id="province" class="border-radius-0 form-control padding-y-0"> 
    <option v-for="province in provinces" value="@{{ province.id }}"> @{{ province.name }} </option> 
</select> 

<select name="city" id="city" class="border-radius-0 form-control padding-y-0"> 
    <option v-for="city in cities" value="@{{ city.id }}"> @{{ city.name }} </option> 
</select> 

これは私のスクリプト

new Vue({ 
     el: '#vue', 
     methods: { 
      fetchProvinces: function() { 
       this.$http.get('{{url('api/provinces')}}').then(function (provinces) { 
        this.$set('provinces', provinces.data) 
       }); 
      } 

     }, 
     computed: { 
      cities() { 
       this.$http.get("{{url('api/cities')}}/" + this.ProvinceModel).then(function (cities) { 
        console.log(cities.data); 
        this.$set('cities', cities.data) 
       }); 

      } 
     }, 
     ready: function() { 
      this.fetchProvinces() 
     }, 
    }); 

とルート

Route::get('cities/{provinces_id}', function ($id = 8) { 
    return \App\province::find($id)->cities()->get(); 
})->where('id', '[0-9]+'); 

Answer 1

計算された関数は、何かを返すべきであり、synnchronously。あなたは何も返さない。

this.citiesもデータとして設定しようとしていますが、this.citiesは既に計算された関数です。 Oneはもう一方を無効にして、矛盾した/混乱する動作を引き起こします。

都市を非同期に取得する方法は、fetchProvincesメソッドの場合と同じ方法です。 ProvinceModelが変更されたときに取得する必要があります。セレクタのイベント、またはProvinceModelの値のVueウォッチャーを使用して行うことができます。

^{サイドノート：通常、コンポーネントのdataパラメータでデータ項目を定義することをお勧めします。 JSコンソールをチェックすると、Vueはそれについての警告を発している可能性があります。}

Answer 2

Vuejsない柔軟である、あなたは、jqueryの通過値を得るためにそれを渡すことができますコントロール。 Refメソッドによる要素は良好です。

Vuejsはワーカーを待つことができません。ビジー状態になると自然に変化します。