2016-09-14 101 views
0

我使用vueJS來顯示相互依賴的選擇。默認值選擇不工作在vuejs

我有3種型號:聯盟 - 協會 - 俱樂部

我的問題是我無法選擇的關聯Ÿ俱樂部選擇默認值(在聯邦,它的工作原理...)

這裏我的看法

<select name="federation_id" v-model="federationSelected" id="federation_id" class="form-control" @change="getAssociations(federationSelected)"> 
<option v-for="federation in federations" v-bind:value="federation.value" selected="@{{ federationId==federation.value }}">@{{ federation.text }}</option> 
</select> 

<div class="form-group"> 
    {!! Form::label('association_id', trans_choice('core.association',1),['class' => 'text-bold']) !!} 
    <select name="association_id" v-model="associationSelected" 
      class="form-control" @change="getClubs(associationSelected)"> 
    <option value="1" 
      v-if="associations!=null && associations.length==0 && federationSelected!=0">{{ trans('core.no_association_available') }}</option> 
    <option v-for="association in associations" v-bind:value="association.value" 
      selected="@{{ associationId==association.value }}"> 
     @{{ association.text }} 
    </option> 
    </select> 
</div> 

這是我的腳本。

let Vue = require('vue'); 

let vm = new Vue({ 
    el: 'body', 
    data: { 
     federations: [], 
     federationSelected: federationId, 
     associations: [], 
     associationSelected: associationId, 

    }, 
    computed: {}, 

    methods: { 
     getFederations: function() { 
      var url = '/api/v1/federations'; 

      $.getJSON(url, function (data) { 
       vm.federations = data; 
      }); 
      this.associationSelected = 1; 
     }, 
     getAssociations: function (federationSelected) { 
      var url = '/api/v1/federations/' + federationSelected + '/associations'; 
      $.getJSON(url, function (data) { 
       vm.associations = data; 
      }); 
      this.clubSelected = 1; 
     }, 
    }, ready: function() { 
     this.getFederations(); 
     if (this.federationSelected != 1) { 
      this.getAssociations(this.federationSelected); 
     } 
    }, 
}); 

我檢查了值是在數據庫中。

傳遞變量到我的劇本,我有

 var federationId = "{{ (Auth::user()->federation_id != 0)? Auth::user()->federation_id : 1}}"; 
    var associationId = "{{ (Auth::user()->association_id != 0)? Auth::user()->association_id : 1}}"; 

在我看來的結尾。我檢查associationId給我15.

但是,當我檢查VUE組分,我有:

associationSelected:1個 協會:數組[14] federationSelected: 「37」 聯合會:數組[47]

所以基本上,我需要將associationSelected設置爲他的值。

我在php中擁有這個值,但不知道爲什麼我不能得到它。

回答

0

的V-綁定不正確分配,這裏有

v- bind:value="federation.value" 

錯字應

v-bind:value="federation.value" 
+0

對不起,應該是一個複製粘貼錯誤。我的代碼很好:v-bind –