选择的默认值在 vuejs 中不起作用

Question

我使用 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 组件时，我有：

关联选择：1 关联：数组[14] federationSelected: "37" 联邦：数组[47]

所以基本上，我需要将 AssociationSelected 设置为他的值。

我在php中拥有这个值，但不知道为什么我不能得到它。

Answer 1

v-bind 分配不正确，这里有错字

 v- bind:value="federation.value"

应该是

 v-bind:value="federation.value"