javascript - 如何正确删除 vue-select 多选项

Question

我有一个 vue-select 多重选择 ( http://sagalbot.github.io/vue-select/ ) 定义为

<v-Select label="label" multiple :on-change="updateCities" :options="cities"></v-Select>

方法 updateCities 定义为

'updateCities': function (menuItem) {
            var name = ''
            // iterate thru the elements in the multiselect
            menuItem.forEach(function (elem, i) {
                name = elem.label
                return name
            })
            // push the selected element to an array in the data model
            this.state.city.push(name)
        }

数据模型定义为

'data' () {
        return {
            'state': {
                'city': []
            }
        }
    }

当我单击多选并选择一个城市时，菜单和数据模型数组 city 都会正确更新，但是当我单击菜单项右上角的 X 来删除时来自菜单和数据模型数组 city 的元素。如下所示

该元素已从菜单中正确删除，但未从数据模型数组city中删除。

如何解决这个问题？

Answer 1

通过将 this.state.city 的值分配给菜单项来解决这个问题:

'updateAdvertisers': function (menuItem) {
            this.state.city= menuItem.map(elem => elem.label)
        }