Vuetify Checbkox 更新每个 API 更新

如何解决Vuetify Checbkox 更新每个 API 更新

我真的很努力地让它工作......我没有成功

所以，我有几个复选框，每个复选框都包含一个城市。当用户单击一个城市时，会对 Elasticsearch 进行 API 调用并更新数据。我认为这就是问题所在。 因此，一旦数据发生变化，复选框就无法保持“点击”状态并且表现得很奇怪。 我尝试了不同的方法

我的复选框代码：

<v-col cols="12">
  <v-checkBox
    v-for="check in posts.data.aggs.city.buckets"
    :key="check.key"
    v-model="filterCity"
    dense
    :value="check"
    :value-comparator="comp"
    hide-details
    :label="check.key + ` (` + check.doc_count + ')'"
    class="pt-0 mt-0"
    multiple
    return-object
    :true-value="check.key"
    @change="cityCh"
  />
</v-col>

这里我有一个 filterCity 的数据对象

我也尝试将 :value="check" 更改为 :value="check.key"，因为那是 City String 但没有成功

一旦我使用@change 方法更新表单，它会自动将新参数推送到路由器，即在进行 API 调用并且我的复选框持久性结束时。

为 city 返回的我的 elasticsearch aggs 对象：

"city": {
    "doc_count_error_upper_bound": 0,"sum_other_doc_count": 0,"buckets": [{
            "key": "New York","doc_count": 3
        },{
            "key": "Miami","doc_count": 1
        },{
            "key": "London",{
            "key": "Berlin","doc_count": 1
        }
    ]
},

有什么办法可以解决这个问题或者应该如何解决

干杯