Question

我想使用vue.js从数据库中过滤数据在刀片文件中，我有以下内容：

<div class="row" id="filterUnits">
    @{{message}}
    {!! Form::open() !!}

    <div class="large-3 columns">
        {!! Form::select('block', getBlocks($site),null,['class'=>'form-control', 'placeholder'=>'All blocks', 'v-model'=>'block', 'v-on:change'=>'getUnits()']) !!}
    </div>
    <div class="large-2 columns">
        {!! Form::text('name', null,['class'=>'form-control', 'placeHolder'=>'Enter unit name']) !!}
    </div>
    <div class="large-2 columns">
        {!! Form::select('floor', getSiteFloors($site),null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-2 columns">
        {!! Form::select('bedroom', getSiteBedrooms($site),null, ['class'=>'form-control', 'placeholder'=>'All Bedrooms', 'v-model'=>'bedroom', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-2 columns">
        {!! Form::select('status', getUnitStatus(),null, ['class'=>'form-control', 'placeholder'=>'All Status', 'v-model'=>'status', 'v-on:change'=>'getUnits()' ]) !!}
    </div>

    {!! Form::close() !!}

在我的app.js中：

    new Vue({
    el: '#filterUnits',
    data: {
        message: "Hey there Vue!",
        units: this.units
    },
    methods: {
        getUnits: function (unit) {
            this.$http.post('/admin/units').then(function (response) {
                console.log(response.data);
                this.units = response.data;
            }, function (response) {
                console.log(response)
            });
        }
    }
});

在后端，我收到请求数据并执行过滤器，该代码没问题。当我检查请求数据时，上面路由调用的函数收到它时，即使我选择了其余的，它也只是第一个输入{block: "1"}。如果我根本不选择block并选择让我们说floor，则收到的请求是一个空数组。

我尝试传递这样的输入：

this.$http.post('/admin/units', {block: this.block,floor: this.floor,bedroom: this.bedroom,status: this.status}).then(function (response)...

但它没有帮助。

Vue.js：v-model仅适用于第一个选择选项

0 个答案: