CODEWITHSUNDEEP
phplaravelvue.js
Juliatzin
Juliatzin

Reputation: 19695

Default value for select not working in vuejs

I use vueJS to display interdependent selects.

I have 3 models: Federations - Associations - Club

My problem is that I can't select default value for association y club selects ( In Federation, it works...)

Here is my view

<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>

And here is my script.

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);
        }
    },
});

I checked that values are in DB.

To pass variables to my script, I have 

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

at the end of my view. I checked associationId gives me 15.

But when I check vue components, I have :

associationSelected: 1 associations: Array[14] federationSelected: "37" federations: Array[47]

So basically, I need to have associationSelected set to his value.

I possess this value in php, but don't know why I can't get it.

Upvotes: 0

Views: 903

Answers (1)

highFlyingSmurfs
highFlyingSmurfs

Reputation: 3039

The v-bind is not assigned correctly, there's typo here

 v- bind:value="federation.value"

should be

 v-bind:value="federation.value"

Upvotes: 1

Related Questions