vue.js - onChange 两个选择 Vuejs 上的最大标签

Question

我的 Vuejs 应用程序有问题，我有两个输入：1-第一个输入是选择“房间”的类型 2-第二个输入是选择房间中的最大用户

问题，比如我选择了4号房间；用户最多 4 人，但如果我回到第一个输入并选择房间 3，第二个输入始终保持值，一旦第一个输入更改，我想进行重置。

这是我的代码：

<div class="form-group">
                    <label class="control-label">
                        Rooms
                    </label>
                    <multiselect
                        :options="roomTypes"
                        v-model="rooms.roomType"
                        track-by="id"
                        label="title"
                        :searchable="true"
                        :allow-empty="true"
                        select-label=""
                        selected-label=""
                        deselect-label=""
                        placeholder=""
                        autocomplete="false"
                        name="room_type_id"

                    ></multiselect>
                </div>
                <div class="form-group">
                    <label class="control-label">
                        Users
                    </label>
                    <multiselect
                        :options="members"
                        v-model="rooms.members"
                        track-by="name"
                        clearable
                        label="name"
                        :multiple="true"
                        :searchable="true"
                        :allow-empty="true"
                        select-label=""
                        selected-label=""
                        placeholder=""
                        autocomplete="false"
                        :max="rooms.roomType.id-1"
                        name="member_id"
                    ></multiselect>
                </div>


    <script>
    let foo = new Vue({
        el: '#vue-app',
        data: {
            roomTypes: @json($roomType),
            rooms: @json($rooms),
            members: @json($members),
        },
        methods: {},
    });
</script>

请问我该怎么做。

谢谢

Answer 1

您可以使用watch来检测值的变化，这里有一个例子：

let foo = new Vue({
    el: '#vue-app',
    data: {
        roomTypes: @json($roomType),
        rooms: @json($rooms),
        members: @json($members),
    },
    methods: {},
    watch: {
        ['rooms.roomType']() {
            this.rooms.members = 1;
        }
    }
});