Question

我使用vueJS来显示相互依赖的选择。

我有3个模特：联盟 - 协会 - 俱乐部

我的问题是我无法选择关联y俱乐部选择的默认值（在联盟中，它有效...）

这是我的观点

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

我检查了数值是否在DB中。

要将变量传递给我的脚本，我有

        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] 联邦选择：“37” 联盟：数组[47]

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

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

Answer 1

未正确分配v-bind，此处有错误

 v- bind:value="federation.value"

应该是

 v-bind:value="federation.value"

select的默认值在vuejs中不起作用

1 个答案: