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

계산 된 함수는 무언가를 반환해야합니다. 넌 아무것도 돌려주지 않을거야.

또한 this.cities을 데이터로 설정하려고 시도했지만 this.cities은 이미 계산 된 기능입니다. 하나는 다른 것을 무시하고 모순 된/혼란스러운 행동을 일으킬 것입니다.

도시를 비동기식으로 가져 오는 방법은 fetchProvinces 메소드와 동일해야합니다. ProvinceModel이 변경되면 선택자의 이벤트를 사용하거나 ProvinceModel 값의 Vue watcher를 사용하여 가져올 수 있습니다.

^{사이드 노트 : 일반적으로 구성 요소의 data 매개 변수에 데이터 항목을 정의하는 것이 가장 좋습니다. JS 콘솔을 확인하면 Vue가 그 일에 대한 경고를 던질 가능성이 있습니다.}

Answer 2

Vuejs 유연하지, 당신은 그것을 통과, JQuery와 통해 가치를 얻을 수 있습니다 제어. 엘리먼트에 의한 ref 메소드가 좋다.

Vuejs는 작업자가 바쁠 때 기다릴 수 없으므로 가치가 없을 때 자연스럽게 변하지 않습니다.