Ich benutze vueJS, um voneinander abhängige Auswahlen anzuzeigen.Standardwert für Auswahl funktioniert nicht in vuejs
Ich habe 3 Modelle: Verbände - Vereine - Verein
Mein Problem ist, dass ich nicht Standardwert für die Zuordnung y Club wählt auswählen (In Föderation, es funktioniert ...)
Hier meine Ansicht
<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>
Und hier ist mein Skript.
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);
}
},
});
Ich habe überprüft, dass die Werte in DB sind.
Um Variablen zu meinem Skript übergeben, ich habe
var federationId = "{{ (Auth::user()->federation_id != 0)? Auth::user()->federation_id : 1}}";
var associationId = "{{ (Auth::user()->association_id != 0)? Auth::user()->association_id : 1}}";
am Ende meiner Sicht. Ich habe associationId gibt mir 15.
Aber wenn ich vue Komponenten überprüfen, die ich habe:
associationSelected: 1 Vereinigungen: Array [14] federationSelected: "37" Verbände: Array [47]
Also im Grunde muss ich associationSelected auf seinen Wert eingestellt haben.
Ich besitze diesen Wert in PHP, weiß aber nicht, warum ich es nicht bekommen kann.
Leider, sollte es eine Kopie Paste Fehler. Mein Code ist gut: v-bind –